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

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

<element class="a b">

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

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

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

$('.a.b')

Порядок не имеет значения, поэтому вы также можете поменять местами классы:

$('.b.a')

Таким образом, чтобы сопоставить divэлемент, имеющий идентификатор aс классами bи c, вы должны написать:

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

(На практике вам, скорее всего, не нужно получать эту конкретную информацию, и обычно достаточно идентификатора или селектора классов:. $('#a'))

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

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

Для случая

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

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

$('.a .b.c')

Проблема в том, что вы используете 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')

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

Например <div id="title1" class="A B C">

Просто введите: $("div#title1.A.B.C")

Решение Vanilla JavaScript: -

document.querySelectorAll('.a.b')

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

$('div.a.b')

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

Выбор группы

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

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

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

document.querySelectorAll('.a.b')

Ваш код $(".a, .b")будет работать для нескольких элементов ниже (одновременно)

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

если вы хотите выбрать элемент, имеющий a и b оба класса, как, <element class="a b">чем использовать JS без комы

$('.a.b')

Вы можете использовать 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>

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

var elem = document.querySelector (". ab");