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

我想选择具有两个类

a

和

b

的所有元素

<element class="a b">

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

---

当我使用

$（“.a，.b”）

时，它给了我一个并集，但我需要交集。

如果您只想将元素与两个类（交集，如逻辑AND）匹配，只需将选择器一起写入，中间不带空格：

$('.a.b')

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

$('.b.a')

因此，要将ID为

a

的

div

元素与类

b

和

c

相匹配，您可以编写：

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

（在实践中，您很可能不需要获取特定的ID或类选择器本身就足够了：

$（“#a”）

）

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

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

---

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

例如，

只需键入：

$（“div#title1.A.B.C”）

就可以了

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

$（'.a.b，.a.c'）.css（'border'，'2px实心黄色'）；
//选择b和c

A.
B
C
D

普通JavaScript解决方案：-

---

document.querySelectorAll（'.a.b'）

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

$('div.a.b')

---

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

您遇到的问题是，您使用的是

组选择器

，而您应该使用

多个选择器

！更具体地说，您使用的是

$（'.a.b'）

，而您应该使用

$（'.a.b'）

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

---

组选择器：“，” 选择所有

元素和所有

元素和所有

元素：

$('h1, p, a')

倍数选择器：“”（无字符） 选择

类型
文本
的所有
元素，并使用类
code
和
红色
：

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

子体选择器：“”（空格）
选择
元素中的所有
元素：

$('p i')

$('div ~ span')

子选择器：“>”
选择作为
元素的直接子元素的所有
元素：

$('li > ul')

相邻同级选择器：“+”
选择紧跟在
元素之后的所有
元素：

$('h2 + a')

一般同级选择器：“~”
选择属于
元素同级的所有
元素：

$('p i')

$('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（“abc”）；
元素[0]。style.color=“绿色”；
console.log（elems[0]）

a
a、b
a、b、c
var elem=document.querySelector（“.a.b”）
 您的代码
$（“.a.b”）
将适用于以下多个元素（同时）

下面的示例将告诉您如何在一行中同时选择多个嵌套类选择器和直接类选择器


//下面是选择器的说明
//.a.b.c=选择位于div a和b内部的嵌套子c
//.a.d=选择位于div a内部的嵌套子d
//.f=选择直接元素，即分区a和b之外的分区f
$（'.a.b.c、.a.d、.f'）.css（'background-color'，'grey'）

A.
B
C
D
E
f
这个答案和公认的答案有什么区别？@Rice:这个答案会稍微慢一点，因为它会先建立一个类为“a”的对象列表，然后删除除类为“b”的对象以外的所有对象，而我的答案只需一步。但除此之外，没有区别。@Flater：这只是为了举例。但是，如果类
b
和
c
是动态添加的，并且您只希望在元素具有这些类时选择该元素，则它可能会很有用。@Shimmy:是。两个选择器之间的空格表示您正在搜索后代；i、 e.
.a.b
搜索类为
b
的元素，这些元素是类为
a
的元素的后代。所以像
diva
这样的东西只会返回
a
元素中的
div
元素。如果你能定义并集和交集对我们这些新手意味着什么，那就太好了：）@KolobCanyon并集和交集是基本的集合论概念。例如，一个联盟将是所有讲法语的人（包括男性和女性），而一个交叉点将是所有讲法语的女性（不包括所有不讲法语的人，也不包括所有非女性的人）。可以使用定义每个集合的任意数量的特征创建并集和交点。我想你的意思是，在“女性”和“讲法语的人”这两组中，工会将是全世界所有的女性和全世界所有讲法语的人，一组包括不讲法语的女性和讲法语的男性。正如你所写的那样，十字路口只有那些说法语的女性。
$('.a.b')