Я хочу выбрать все элементы, которые имеют два класса a
и b
.
<element class="a b">
Итак, только элементы, имеющие оба класса.
Когда я использую $(".a, .b")
, это дает мне объединение, но я хочу пересечение.
Я хочу выбрать все элементы, которые имеют два класса a
и b
.
<element class="a b">
Итак, только элементы, имеющие оба класса.
Когда я использую $(".a, .b")
, это дает мне объединение, но я хочу пересечение.
Если вы хотите сопоставить только элементы с обоими классами (пересечение, например, логическое И), просто запишите селекторы вместе без пробелов между ними:
$('.a.b')
Порядок не имеет значения, поэтому вы также можете поменять классы местами:
$('.b.a')
Итак, чтобы сопоставить элемент div
с идентификатором a
с классами b
и c
, вы должны написать:
$('div#a.b.c')
(На практике вам, скорее всего, не нужно указывать это конкретное, и обычно достаточно одного идентификатора или селектора класса: $('#a')
.)
b
и c
добавляются динамически, и вы хотите выбрать элемент только в том случае, если он имеет эти классы.
- person Sasha Chedygov; 07.08.2012
.a .b
ищет элементы с классом b
, которые являются потомками элемента с классом a
. Таким образом, что-то вроде div a
вернет только a
элементов, которые внутри элемента div
.
- person Sasha Chedygov; 13.05.2013
Это можно сделать с помощью функции filter()
:
$(".a").filter(".b")
По делу
<element class="a">
<element class="b c">
</element>
</element>
Вам нужно будет поставить пробел между .a
и .b.c
$('.a .b.c')
Проблема в том, что вы используете 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')
Упомяните еще один случай с element:
E.g. <div id="title1" class="A B C">
Просто введите: $("div#title1.A.B.C")
Решение Vanilla JavaScript: -
document.querySelectorAll('.a.b')
Для лучшей производительности вы можете использовать
$('div.a.b')
Это будет просматривать только элементы div, а не пошагово просматривать все элементы html, которые есть на вашей странице.
Селектор группы
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")
ваш код $(".a, .b")
будет работать для нескольких элементов ниже (одновременно)
<element class="a">
<element class="b">
если вы хотите выбрать элемент, имеющий a и b, оба класса, такие как <element class="a b">
, чем использовать js без комы
$('.a.b')
Для этого вам не нужен jQuery
В Vanilla
вы можете:
document.querySelectorAll('.a.b')
Вы можете использовать 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>
Это также самое быстрое решение. вы можете увидеть тест этого здесь.
var elem = document.querySelector (". a.b");
Пример ниже даст вам представление о выборе одновременно нескольких вложенных селекторов классов и прямых селекторов классов в одной строке.
//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>