name - selector jquery




我如何在jQuery中選擇一個包含多個類的元素? (7)

Vanilla JavaScript解決方案: -

document.querySelectorAll('.a.b')

我想選擇所有具有兩個類ab的元素。

<element class="a b">

所以,只有這兩個類的元素。

當我使用$(".a, .b")它給了我工會,但我想要交集。


你不需要這個jQuery

Vanilla你可以做到:

document.querySelectorAll('.a.b')

只要提及元素的另一個案例:

例如<div id="title1" class="ABC">

只需輸入: $("div#title1.ABC")


如果你想要一個十字路口,只需將選擇器寫在一起, 不要在它們之間留有空格

$('.a.b')

因此,對於ID為abc的元素,可以這樣寫:

$('#a.b.c')

您遇到的問題是您正在使用Group Selector ,而您應該使用Multiples selector ! 更具體地說,你使用$('.a, .b')而你應該使用$('.a.b')

有關更多信息,請參閱下面結合選擇器的不同方法的概述!

組選擇器:“,”

選擇所有<h1>元素和所有<p>元素以及所有<a>元素:

$('h1, p, a')

倍數選擇器:“”(無字符)

選擇type text所有<input>元素,並帶有類codered

$('input[type="text"].code.red')

後代選擇器:“”(空格)

選擇<p>元素內的所有<i> <p>元素:

$('p i')

子選擇器:“>”

選擇<li>元素的直接子元素的所有<ul>元素:

$('li > ul')

相鄰同級選擇器:“+”

選擇緊接在<h2>元素之後的所有<a>元素:

$('h2 + a')

一般兄弟姐妹選擇:“〜”

選擇所有屬於<div>元素的兄弟元素的<div>元素:

$('div ~ span')

為了更好的表現,你可以使用

$('div.a.b')

這只會通過div元素來看,而不是逐步瀏覽頁面上的所有html元素。


$('.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>





jquery-selectors