Как выбрать элемент с несколькими классами в jQuery?
Я хочу выбрать все элементы, которые имеют оба класса a
и b
.
<element class="a b">
То есть, только те элементы, которые имеют оба класса.
Когда я использую $(".a, .b")
, это возвращает объединение, но мне нужен пересечение.
4 ответ(ов)
Если вы хотите выбрать элементы, у которых есть обе класса (пересечение, как логическое И), просто напишите селекторы вместе без пробелов между ними:
$('.a.b')
Порядок не имеет значения, поэтому вы также можете поменять местами классы:
$('.b.a')
Чтобы выбрать элемент div
, у которого ID — это a
, а классы — b
и c
, вы можете записать:
$('div#a.b.c')
(На практике, скорее всего, вам не нужно быть столь конкретным, и селектор ID или класса сам по себе обычно бывает достаточен: $('#a')
.)
Для вашего случая
<element class="a">
<element class="b c">
</element>
</element>
вам необходимо добавить пробел между селекторами .a
и .b.c
, чтобы правильно выбрать элемент. Это будет выглядеть следующим образом:
$('.a .b.c')
Таким образом, первый селектор .a
выберет элемент с классом a
, а пробел указывает на то, что селектор .b.c
должен находиться внутри элемента с классом a
.
Вы можете использовать следующий код jQuery для того, чтобы выбрать элементы с классами .b
и .c
, находящиеся внутри элемента с классом .a
и применить к ним стиль границы:
$('.a .b, .a .c').css('border', '2px solid yellow');
// выбирает элементы b и c
В этом коде .a .b
и .a .c
выступают в роли селекторов, которые выбирают элементы с классами b
и c
, находящиеся внутри элемента с классом a
.
Вот пример HTML-кода, который соответствует вашему вопросу:
<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>
В результате выполнения данного кода, элементы с классами b
и c
будут обведены жёлтой границей шириной 2 пикселя. Элемент с классом d
останется без изменений, так как он не попадает под селекторы.
Вы можете использовать селектор jQuery для выбора элемента, указав идентификатор и классы. Например, если у вас есть элемент:
<div id="title1" class="A B C"></div>
Вы можете написать следующий код jQuery:
$("div#title1.A.B.C")
В этом селекторе div#title1
указывает на элемент с ID title1
, а A.B.C
указывает на наличие классов A
, B
и C
.
Как узнать, какая радиокнопка выбрана с помощью jQuery?
Как выбрать элемент по имени с помощью jQuery?
Выбор и манипуляция псевдоэлементами CSS ::before и ::after с помощью JavaScript (или jQuery)
Как задать cellpadding и cellspacing с помощью CSS?
Как расположить div внизу своего контейнера?