it-swarm.com.ru

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

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

<element class="a b">

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

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

1916
Mladen

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

$('.a.b')

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

$('.b.a')

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

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

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

2466
Sasha Chedygov

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

$(".a").filter(".b")
162
Jamie Love

Для случая

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

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

$('.a .b.c')
113
juanpaulo

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

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


Выбор группы: ","

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

$('h1, p, a')

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

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

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

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

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

$('p i')

Выбор ребенка: ">"

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

$('li > ul')

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

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

$('h2 + a')

Главный Выбор Родного брата: "~"

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

$('div ~ span')
57
John Slegers
$('.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>
36
user2298171

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

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

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

25
macio.Jun

Решение Vanilla JavaScript: -

document.querySelectorAll('.a.b')

25
Salman Abbas

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

$('div.a.b')

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

18
Tejas Shah

Выбор группы

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") 
8
Surya R Praveen

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

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

document.querySelectorAll('.a.b')
3
Sandwell

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

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

1
bahman parsamanesh