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

1688

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

<element class="a b">

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

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

  • 2
    Было бы хорошо, если бы вы могли определить, что означает объединение и пересечение для нас, новичков :)
  • 6
    @KolobCanyon объединение и пересечение являются основными понятиями теории множеств. Так, например, в союзе будут все носители французского языка (включая мужчин и женщин), тогда как на пересечении будут все женщины, говорящие по-французски (исключая всех, кто не говорит по-французски, и исключая всех людей, которые не являются женщинами). Объединения и пересечения могут быть сделаны с любым количеством характеристик, определяющих каждый набор. en.wikipedia.org/wiki/Union_(set_theory) en.wikipedia.org/wiki/Intersection_(set_theory)
Показать ещё 1 комментарий
Теги:
css-selectors
jquery-selectors

11 ответов

2410
Лучший ответ

Если вы хотите пересечение, просто напишите селекторам вместе без пробелов между ними.

$('.a.b')

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

$('#a.b.c')
  • 8
    @Flater: это было только ради примера. Но это может быть полезно, если классы b и c добавляются динамически, и вы хотите выбрать элемент, только если у него есть эти классы.
  • 2
    Ага, хорошая точка зрения :-) До сих пор я бы использовал .hasClass (), но это намного лучшая запись.
Показать ещё 9 комментариев
140

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

$(".a").filter(".b")
  • 15
    В чем разница между этим ответом и принятым?
  • 45
    @Rice: Этот будет немного медленнее, потому что он сначала создаст список объектов с классом "a", затем удалит все, кроме тех, которые имеют класс "b", тогда как мой делает это за один шаг. Но в остальном без разницы.
Показать ещё 6 комментариев
102

Для случая

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

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

$('.a .b.c')
  • 0
    Добавляя к вашему ответу, я хотел бы знать, как получить доступ к b и c, если случай такой, как показано ниже: <element class = "a"> <element class = "b"> </ element> <element class = "c" > </ element> </ element>? Через $ ('. A .bc') выдает неправильный результат.
  • 1
    @IpsitaRout $('.a .b, .a .c') должен добиться $('.a .b, .a .c')
Показать ещё 3 комментария
44

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

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

Ванильное JavaScript-решение: -

document.querySelectorAll('.a.b')

23

Просто укажите другой случай с элементом:

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

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

16

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

$('div.a.b')

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

6

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

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

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

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

document.querySelectorAll('.a.b')
  • 0
    Правда в 2018 году, но не когда этот вопрос был задан в 2009 году
0

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

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

Ещё вопросы

Сообщество Overcoder
Наверх
Меню