Как выбрать элемент с несколькими классами в jQuery?

Я хочу, чтобы выбрать все элементы, которые имеют два класса a и b.

<element class="a b">

так, только элементы и классы.

когда я использую $(".a, .b") это дает мне Союз, но я хочу перекрестке.

1804
css-selectors javascript jquery jquery-selectors

11 ответов

если вы хотите пересечение, просто напишите селекторы вместе без пробелов в между. 

$('.a.b')

так для элемента с идентификатором a классы b и c, вы хотели написать:

$('#a.b.c')
2330

Вы можете сделать это с помощью filter() функция:

$(".a").filter(".b")
150

по делу

<element class="a">
  <element class="b c">
  </element>
</element>

вам нужно будет поставить пробел между .a и .b.c

$('.a .b.c')
103

проблема в том, что вы используете Group Selector, тогда как вы должны использовать Multiples selector! Чтобы быть более конкретным, вы используете $('.a, .b') в то время как вы должны использовать $('.a.b').

для получения дополнительной информации см. обзор различных способов объединить селекторы ниже!

Группа Селектора : ","

выделить все <h1> элементы и все <p> элементы и все <a> элементы :

$('h1, p, a')

кратные селектор: "" (без символа)

выделить все <input> элементов type text С code и red :

$('input[type="text"].code.red')

селектор потомка : "" (пробел)

выделить все <i> внутри <p> элементы: 

$('p i')

Селектор Ребенка : ">"

выделить все <ul> элементы, которые являются непосредственными детьми <li> элемент:

$('li > ul')

Смежный Селектор : "+ "

выделить все <a> элементы, которые размещаются сразу после <h2> элементы:

$('h2 + a')

Селектор Общего Брата:"~"

выделить все <span> элементы, которые являются элементами <div> элементы: 

$('div ~ span')
49

$('.a .b , .a .c').css('border', '2px solid yellow');
//selects b and c
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="a">a
  <div class="b">b</div>
  <div class="c">c</div>
  <div class="d">d</div>
</div>
33

просто упомяните другой случай с элементом:

Е. Г. <div id="title1" class="A B C">

просто типа: $("div#title1.A.B.C")

22

Ванильное решение JavaScript: -

document.querySelectorAll('.a.b')

22

для лучшей производительности вы можете использовать

$('div.a.b')

Это будет выглядеть только через элементы div вместо перехода через все элементы html, которые у вас есть на Вашей странице.

16

Группа Селектора

body {font-size: 12px; }
body {font-family: arial, helvetica, sans-serif;}
th {font-size: 12px; font-family: arial, helvetica, sans-serif;}
td {font-size: 12px; font-family: arial, helvetica, sans-serif;}

становится этот:

body, th, td {font-size: 12px; font-family: arial, helvetica, sans-serif;}

так что в вашем случае вы попробовали селектор группы, тогда как его пересечение

$(".a, .b")

используйте этот код

$(".a.b")
6

не нужно jQuery для этого

на Vanilla вы можете сделать :

document.querySelectorAll('.a.b')
1

можно использовать getElementsByClassName() метод для того, что вы хотите.

var elems = document.getElementsByClassName("a b c");
elems[0].style.color = "green";
console.log(elems[0]);
<ul>
  <li class="a">a</li>
  <li class="a b">a, b</li>
  <li class="a b c">a, b, c</li>
</ul>

Это самое быстрое решение. вы можете увидеть эталон об этом здесь.

0