Я хочу выбрать все элементы, которые имеют два класса a
и b
.
<element class="a b">
Итак, только элементы, имеющие оба класса.
Когда я использую $(".a, .b")
, я получаю объединение, но мне нужно пересечение.
14 ответов
Если вы хотите сопоставить только элементы с обоими классами (пересечение, например, логическое И), просто запишите селекторы вместе без пробелов между ними:
$('.a.b')
Порядок не имеет значения, поэтому вы также можете поменять классы местами:
$('.b.a')
Итак, чтобы сопоставить элемент div
с идентификатором a
с классами b
и c
, вы должны написать:
$('div#a.b.c')
(На практике вам, скорее всего, не нужно указывать это конкретное, и обычно достаточно одного идентификатора или селектора класса: $('#a')
.)
Это можно сделать с помощью функции 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')
$('.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>
Упомяните еще один случай с element:
Например. <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')
Вы можете использовать метод 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>
Для этого вам не понадобится jQuery
В Vanilla
вы можете:
document.querySelectorAll('.a.b')
Похожие вопросы
Новые вопросы
jquery
jQuery - это библиотека JavaScript, рассмотрите возможность добавления тега JavaScript. jQuery - это популярная кросс-браузерная библиотека JavaScript, которая облегчает прохождение Document Object Model (DOM), обработку событий, анимацию и взаимодействие AJAX, сводя к минимуму расхождения между браузерами. Вопрос с тегом jQuery должен быть связан с jQuery, поэтому jQuery должен использоваться в рассматриваемом коде, и в вопросе должны быть как минимум элементы, связанные с использованием jQuery.