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

Question

我想选择具有两个类a和b所有元素。

<element class="a b">

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

当我使用$(".a, .b")它给了我联合，但我想要交集。

Answer 1

如果您只想匹配具有两个类的元素（交集，如逻辑 AND），只需将选择器写在一起，中间没有空格：

$('.a.b')

顺序不相关，因此您也可以交换类：

$('.b.a')

因此，要将 ID 为a的div元素与类b和c相匹配，您可以编写：

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

（实际上，您很可能不需要获得特定的信息，ID 或类选择器本身通常就足够了： $('#a') 。）

Answer 2

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

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

Answer 3

对于这种情况

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

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

$('.a .b.c')

Answer 4

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

有关更多信息，请参阅下面组合选择器的不同方法的概述！

---

组选择器：“，”

选择所有<h1>元素和所有<p>元素和所有<a>元素：

$('h1, p, a')

倍数选择器：""（无字符）

选择所有type text <input>元素，以及类code和red ：

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

后代选择器：“”（空格）

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

$('p i')

子选择器：“>”

选择作为<li>元素的直接子元素的所有<ul>元素：

$('li > ul')

相邻兄弟选择器：“+”

选择所有紧跟在<h2>元素之后的<a>元素：

$('h2 + a')

一般兄弟选择器：“~”

选择所有<span>元素的同级<div>元素：

$('div ~ span')

Answer 5

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

Answer 6

只需提及另一个带有元素的案例：

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

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

Answer 7

香草 JavaScript 解决方案：-

document.querySelectorAll('.a.b')

Answer 8

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

$('div.a.b')

这将只查看 div 元素，而不是单步查看页面上的所有 html 元素。

Answer 9

组选择器

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") 

Answer 10

您的代码$(".a, .b")将适用于以下多个元素（同时）

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

如果你想选择具有 a 和 b 两个类的元素，比如<element class="ab">不是使用没有昏迷的 js

$('.a.b')

Answer 11

您不需要为此使用jQuery

在Vanilla您可以执行以下操作：

document.querySelectorAll('.a.b')

Answer 12

您可以根据需要使用getElementsByClassName()方法。

 var elems = document.getElementsByClassName("abc"); elems[0].style.color = "green"; console.log(elems[0]);

 <ul> <li class="a">a</li> <li class="ab">a, b</li> <li class="abc">a, b, c</li> </ul>

这也是最快的解决方案。 你可以在这里看到一个基准。

Answer 13

下面的示例将让您了解一次在一行中选择多个嵌套类选择器和直接类选择器

 //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>

Answer 14

var elem = document.querySelector(".ab");