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

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

$('.a.b')

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

$('.b.a')

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

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

（在实践中，你很可能不需要得到那个特定的，ID或类选择器本身通常就足够了：$('#a')。

您可以使用#0函数执行此操作：

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

再举一个带有元素的例子：

例如<div id="title1" class="A B C">

只需键入：$("div#title1.A.B.C")

为了这个案子

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

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

$('.a .b.c')

Vanilla JavaScript解决方案：-

document.querySelectorAll('.a.b')

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

$('div.a.b')

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

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

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

组选择器："，"

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

$('h1, p, a')

多重选择器 : "" (无字符）

选择typetext的所有<input>元素，类code和red：

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

后代选择器 : " " (空间）

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

$('p i')

子选择器：“>”

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

$('li > ul')

相邻同级选择器：“+”

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

$('h2 + a')

一般兄弟姐妹选择器：“~"

选择作为<div>元素的兄弟姐妹的所有<span>元素：

$('div ~ span')

组选择器

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

你不需要jQuery

在Vanilla中，你可以这样做：

document.querySelectorAll('.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.query选择器（". a. b"）；

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

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

如果您想选择具有a和b两个类的元素，例如<element class="a b">，而不是使用不带逗号的js

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