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

Question

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

<element class="a b">

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

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

Answer 1

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

$('.a.b')

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

$('.b.a')

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

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

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

Answer 2

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

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

Answer 3

Для случая

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

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

$('.a .b.c')

Answer 4

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

Child Selector: ">"

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

$('li > ul')

Селектор соседнего брата: "+"

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

$('h2 + a')

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

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

$('div ~ span')

Answer 5

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

Answer 6

Решение Vanilla JavaScript: -

document.querySelectorAll('.a.b')

Answer 7

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

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

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

Answer 8

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

$('div.a.b')

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

Answer 9

Выбор группы

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

Answer 10

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

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

document.querySelectorAll('.a.b')