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

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

<element class="a b">

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

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

24.06.2009 22:28:58
Было бы хорошо, если бы вы могли определить, что означает объединение и пересечение для нас, новичков :)
Kolob Canyon 13.04.2016 03:22:55
@KolobCanyon объединение и пересечение являются основными понятиями теории множеств. Так, например, в союзе будут все носители французского языка (включая мужчин и женщин), тогда как на пересечении будут все женщины, говорящие по-французски (исключая всех, кто не говорит по-французски, и исключая всех людей, которые не являются женщинами). Объединения и пересечения могут быть сделаны с любым количеством характеристик, определяющих каждый набор. en.wikipedia.org/wiki/Union_(set_theory) en.wikipedia.org/wiki/Intersection_(set_theory)
Katharine Osborne 25.07.2016 16:04:17
Я думаю, вы имеете в виду, что из двух наборов "женщины" и "говорящие по-французски" союзом будут все женщины в мире и все говорящие по-французски в мире, набор, который включает в себя как женщин, которые не говорят Французы и франкоговорящие мужчины. Пересечение, как вы написали, только те женщины, которые говорят по-французски.
Teemu Leisti 8.09.2016 11:24:04
13 ОТВЕТОВ
РЕШЕНИЕ

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

$('.a.b')

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

$('.b.a')

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

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

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

2609
25.11.2018 21:26:57
@Flater: это было просто ради примера. Но это может быть полезно, если классы bи cдобавляются динамически, и вы хотите выбрать элемент, только если у него есть эти классы.
Sasha Chedygov 7.08.2012 17:19:52
Ага, хорошая точка зрения :-) До сих пор я бы использовал .hasClass (), но это намного лучшая запись.
Flater 8.08.2012 08:29:16
Этот метод выбора также работает для CSS, например .ab {style properties} см. Css-tricks.com/multiple-class-id-selectors
Chris Halcrow 26.08.2012 23:54:11
@ Шимми: Да. Пробел между двумя селекторами означает, что вы ищете потомков; т.е. .a .bищет элементы с классом, bкоторые являются потомками элемента с классом a. Так что- то вроде div aбудет возвращать только aэлементы, которые в виде divэлемента.
Sasha Chedygov 12.05.2013 23:49:01
@AaA: это неправильно; так было с самого начала jQuery, потому что так работает CSS. Запятая выбирает элементы, которые соответствуют любому из селекторов (представьте, что это логическое ИЛИ), а не оба, поэтому это не одно и то же (хотя я понимаю, что это может сбивать с толку).
Sasha Chedygov 15.10.2015 03:41:25

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

$(".a").filter(".b")
172
30.01.2017 13:56:34
В чем разница между этим ответом и принятым?
Vivian River 9.08.2011 14:32:08
@Rice: Этот будет немного медленнее, потому что сначала он создаст список объектов с классом "a", затем удалит все, кроме тех, которые имеют класс "b", тогда как мой делает это за один шаг. Но в остальном без разницы.
Sasha Chedygov 8.09.2011 09:39:38
Это сработало для меня в случае, когда я искал класс, определенный как переменную, который не работал с синтаксисом в первом примере. Например: $ ('. foo'). фильтр (переменная). Спасибо
pac 9.02.2012 22:28:22
@pac: $ ('. foo' + переменная) должна была сделать свое дело, но я вижу, где этот метод будет более понятным в этом случае.
Sasha Chedygov 14.02.2012 10:19:58
Это также более эффективно, если вы уже нашли .aи вам нужно многократно фильтровать различные произвольные классы, которые также принадлежат исходному .aнабору.
Qix - MONICA WAS MISTREATED 12.03.2014 21:50:19

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

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

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

26
14.12.2012 16:15:11

Для случая

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

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

$('.a .b.c')
120
30.12.2016 15:52:07
Добавляя к вашему ответу, я хотел бы знать, как получить доступ к b и c, если описанный ниже случай: <element class = "a"> <element class = "b"> </ element> <element class = "c" > </ element> </ element>? Через $ ('. A .b.c') выдает неправильный результат.
Ipsita Rout 6.04.2013 09:07:40
В этом примере селектор $('.a .c.b')также будет работать?
Daniel W. 22.08.2014 09:43:50
Да, так как порядок не имеет значения.
Zim84 2.09.2018 08:40:23
$('.a > element')
Alex 3.09.2018 11:54:33

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

38
27.12.2017 07:52:32

Решение Vanilla JavaScript: -

document.querySelectorAll('.a.b')

26
29.01.2015 18:02:58

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

$('div.a.b')

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

19
28.09.2015 05:26:30

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

Выбор группы

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
17.05.2017 13:57:26

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

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

document.querySelectorAll('.a.b')
4
4.04.2018 08:00:13
Правда в 2018 году, но не тогда, когда этот вопрос был задан в 2009 году
Michiel 18.03.2019 10:42:15

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

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

1
4.10.2019 17:16:26

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

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

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

$('.a.b')
3
10.10.2019 08:05:11