Как выбрать элемент с несколькими классами в 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?
Как убрать кнопку закрытия в диалоговом окне jQuery UI?
Несколько файлов JavaScript/CSS: лучшие практики?
Установить значение по умолчанию в выпадающем списке с помощью jQuery