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

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

$('.a.b')

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

$('.b.a')

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

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

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

---

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

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

---

对于案件

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

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

$('.a .b.c')

---

您遇到的问题是您使用的是 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 i')

子选择器：">"

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

$('li > ul')

相邻兄弟选择器：“+”

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

$('h2 + a')

通用兄弟选择器：“~”

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

$('div ~ span')

---

$('.a .b , .a .c').css('border', '2px 纯黄色'); //选择 b 和 c

---

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

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

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

---

香草 JavaScript 解决方案：-

document.querySelectorAll('.a.b')

---

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

$('div.a.b')

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

---

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

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

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

$('.a.b')

---

组选择器

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

---

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

//这里是选择器的解释 //.a .b .c = 选择 div a 和 b 内的嵌套子 c //.a .d = 选择 div a 内的嵌套子 d //.f =选择直接元素，即 div f，它位于 div a 和 b $('.a .b .c , .a .d, .f').css('background-color', 'grey');

---

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

var elems = document.getElementsByClassName("ab c"); elems[0].style.color = "绿色";控制台.log(elems[0]);

• a
• a, b
• a, b, c
< /ul>

这也是最快的解决方案。您可以看到有关该 here 的基准。

---

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

---