javascript - элементы - jquery селекторы несколько классов




Как я могу выбрать элемент с несколькими классами в jQuery? (8)

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

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

document.querySelectorAll('.a.b')

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

<element class="a b">

Итак, только те элементы, которые имеют оба класса.

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


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

document.querySelectorAll('.a.b')


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

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

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

$('div.a.b')

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


Если вы хотите совместить только элементы с обоими классами (пересечение, как логическое И), просто напишите селектора вместе без пробелов между ними:

$('.a.b')

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

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

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

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

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

Выберите все элементы <h1> И все элементы <p> И все элементы <a> :

$('h1, p, a')

Селектор мультипликации: "" (без символа)

Выберите все элементы <input> text type , с code классов и red :

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

Селектор потомков: "" (пробел)

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

$('p i')

Селектор детей: ">"

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

$('li > ul')

Смежный селектор: «+»

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

$('h2 + a')

Общий селектор сиблинга: "~"

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

$('div ~ span')

Селектор групп

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") 

$('.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>





jquery-selectors