如何在jQuery中选择具有多个类的元素？-Java 学习之路

1839

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

<element class="a b">

所以，只有具有两个类的元素 .

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

11 回答

2365
您可以使用filter()函数执行此操作：
```
$(".a").filter(".b")
```
回复于 2024-04-27T02:55:35+08:00
24
为了获得更好的性能，您可以使
```
$('div.a.b')
```
这将只通过div元素，而不是单步执行页面上的所有html元素 .
回复于 2024-04-27T02:55:35+08:00
52
你遇到的问题是你正在使用 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')
```
一般同级选择器：“〜”

选择所有 <span> 元素，它们是 <div> 元素的兄弟：
```
$('div ~ span')
```
回复于 2024-04-27T02:55:35+08:00
23

Vanilla JavaScript解决方案： -

document.querySelectorAll('.a.b')

回复于 2024-04-27T02:55:35+08:00
17
你不需要 jQuery

在 Vanilla 你可以这样做：
```
document.querySelectorAll('.a.b')
```
回复于 2024-04-27T02:55:35+08:00
34
对于这种情况
```
<element class="a">
  <element class="b c">
  </element>
</element>
```
您需要在 .a 和 .b.c 之间放置一个空格
```
$('.a .b.c')
```
回复于 2024-04-27T02:55:35+08:00
1
如果你只想匹配 both 类的元素（交集，就像逻辑AND），只需将选择器一起写入 without spaces 之间：
```
$('.a.b')
```
订单不相关，因此您也可以交换类：
```
$('.b.a')
```
因此，要将ID为 a 的 div 元素与类 b 和 c 进行匹配，您需要编写：
```
$('div#a.b.c')
```
（在实践中，您很可能不需要获取特定内容，并且ID或类选择器本身通常就足够了： $('#a') . ）
回复于 2024-04-27T02:55:35+08:00

108

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

回复于 2024-04-27T02:55:35+08:00

组选择器

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

回复于 2024-04-27T02:55:35+08:00

您可以根据需要使用 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>

这也是最快的解决方案 . 你可以看到关于here的基准 .

回复于 2024-04-27T02:55:35+08:00

154

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

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

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

回复于 2024-04-27T02:55:35+08:00

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

11 回答

组选择器：“，”

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

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

子选择器：“>”

相邻的兄弟选择器：“”

一般同级选择器：“〜”

相关问题