Как выбрать элемент с несколькими классами в jQuery?
Я хочу, чтобы выбрать все элементы, которые имеют два класса a
и b
.
<element class="a b">
так, только элементы и классы.
когда я использую $(".a, .b")
это дает мне Союз, но я хочу перекрестке.
11 ответов
если вы хотите пересечение, просто напишите селекторы вместе без пробелов в между.
$('.a.b')
так для элемента с идентификатором a
классы b
и c
, вы хотели написать:
$('#a.b.c')
Вы можете сделать это с помощью 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>
просто упомяните другой случай с элементом:
Е. Г. <div id="title1" class="A B C">
просто типа: $("div#title1.A.B.C")
для лучшей производительности вы можете использовать
$('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")
можно использовать 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>
Это самое быстрое решение. вы можете увидеть эталон об этом здесь.