Як я можу вибрати елемент з кількома класами в jQuery?

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

<element class="a b">

Отже, лише елементи, які мають обидва класи.

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

Якщо ви хочете зіставити лише елементи з обох класів (перетин, як логічний І), просто запишіть селектори разом без пробілів між ними:

$('.a.b')

Порядок не відповідає, тому ви також можете поміняти місцями класи:

$('.b.a')

Отже, щоб відповідати divелементу, який має ідентифікатор aкласу, bі cви напишете:

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

(На практиці вам, швидше за все, не потрібно розбиратись у цьому конкретному стилі, і самий селектор ID або класу зазвичай достатній:. $('#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")

Ванільне рішення 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");