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

<element class="a b">

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

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

2150
Mladen 25 Июн 2009 в 02:28

14 ответов

Лучший ответ

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

$('.a.b')

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

$('.b.a')

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

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

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

2742
Sasha Chedygov 25 Ноя 2018 в 21:26

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

$(".a").filter(".b")
177
Ben Everard 30 Янв 2017 в 13:56

По делу

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

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

$('.a .b.c')
128
Kenly 30 Дек 2016 в 15:52

Проблема в том, что вы используете 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')
67
John Slegers 29 Дек 2016 в 14:44
$('.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>
40
beaver 27 Дек 2017 в 07:52

Упомяните еще один случай с element:

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

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

25
macio.Jun 14 Дек 2012 в 16:15

Решение Vanilla JavaScript: -

document.querySelectorAll('.a.b')

25
Salman von Abbas 29 Янв 2015 в 18:02

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

$('div.a.b')

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

20
Tejas Shah 28 Сен 2015 в 05:26

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

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") 
9
Surya R Praveen 17 Май 2017 в 13:57

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

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

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

$('.a.b')
4
Savan 10 Окт 2019 в 08:05

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

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

2
bahman parsamanesh 1 Авг 2018 в 10:41

Var elem = document.querySelector (". a.b");

1
Karim Ali 4 Окт 2019 в 17:16

Пример ниже даст вам представление о выборе одновременно нескольких вложенных селекторов классов и прямых селекторов классов в одной строке.

//Here is Explaination of Selectors  
//.a .b .c  = selects nested child c which is inside of div a and b
//.a .d     = selects nested child d which is inside of div a 
//.f        = selects direct element ie div f which is outside of div a and b
$('.a .b .c , .a .d, .f').css('background-color', 'grey');
<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 class="c">c</div>
  </div> 
  <div class="d">d</div>
</div>
<div class="e">e</div>
<div class="f">f</div>
1
Gauri Bhosle 2 Май 2021 в 15:09

Для этого вам не понадобится jQuery

В Vanilla вы можете:

document.querySelectorAll('.a.b')
3
Sandwell 4 Апр 2018 в 08:00