如何在 jQuery 中选择具有多个类的元素?

我想选择具有两个类ab所有元素。

<element class="a b">

因此,只有具有两个类的元素。

当我使用$(".a, .b")它会给我联合,但是我想要交点。

答案

如果只想匹配两个类的元素(一个交集,如逻辑 AND),则只需将选择器写在一起, 在它们之间不能有空格

$('.a.b')

顺序无关紧要,因此您也可以交换类:

$('.b.a')

因此,要匹配 ID 为a且具有类bcdiv元素,应编写:

$('div#a.b.c')

(在实践中,您很可能不需要具体说明,通常使用 ID 或类选择器本身就足够了: $('#a') 。)

您可以使用filter()函数执行此操作:

$(".a").filter(".b")

对于这种情况

<element class="a">
  <element class="b c">
  </element>
</element>

您需要在.a.bc之间放置一个空格

$('.a .b.c')

您遇到的问题是您正在使用Group Selector ,而您应该使用Multiples selector !更具体地说,您正在使用$('.a, .b')而您应该使用$('.ab')

有关更多信息,请参见下文组合选择器的不同方法的概述!


组选择器:“,”

选择所有<h1>元素和所有<p>元素以及所有<a>元素:

$('h1, p, a')

倍数选择器:“”(无字符)

选择所有<input>的元素type text ,与类codered

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

后代选择符:“”(空格)

选择<p>元素内的所有<i> <p>元素:

$('p i')

子选择器:“>”

选择所有<ul> <li>元素的直接<li>元素:

$('li > ul')

相邻兄弟选择器:“+”

选择紧随<h2>元素之后的所有<a>元素:

$('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="AB C">

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

香草 JavaScript 解决方案:-

document.querySelectorAll('.ab')

为了获得更好的性能,您可以使用

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