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

Question

我想选择具有两个类

a

和

b

的所有元素。

<element class="a b">

因此，只有具有 both 类的元素。

当我使用

$(".a, .b")

时，它给了我并集，但我想要交集。

Answer 1

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

$('.a.b')

顺序不相关，所以你也可以交换课程：

$('.b.a')

因此，要将 ID 为

div

的

a

元素与类

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

和

.b.c

之间添加一个空格

$('.a .b.c')

Answer 4

您遇到的问题是您正在使用

Group Selector

，而您应该使用

Multiples selector

！更具体地说，您正在使用

$('.a, .b')

，而您应该使用

$('.a.b')

。

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

---

组选择器：“，”

选择所有

<h1>

元素和所有

<p>

元素和所有

<a>

元素：

$('h1, p, a')

多重选择器：“”（无字符）

选择

<input>

type

的所有

text

元素，具有类

code

和

red

:

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

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

选择

<i>

元素内的所有

<p>

元素：

$('p i')

子选择器：">"

选择作为

<ul>

元素直接子级的所有

<li>

元素：

$('li > ul')

相邻兄弟选择器：“+”

选择紧接在

<a>

元素之后放置的所有

<h2>

元素：

$('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="A B C">

只需输入：

$("div#title1.A.B.C")

Answer 7

Vanilla JavaScript 解决方案：-

document.querySelectorAll('.a.b')

Answer 8

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

$('div.a.b')

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

Answer 9

您的代码

$(".a, .b")

将适用于以下多个元素（同时）

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

如果你想选择具有 a 和 b 两个类的元素，例如

<element class="a b">

，则不要使用不带逗号的 js

$('.a.b')

Answer 10

组选择器

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 11

您不需要

jQuery

为此

在

Vanilla

你可以做：

document.querySelectorAll('.a.b')

Answer 12

下面的示例将向您展示如何在一行中一次选择多个嵌套类选择器和直接类选择器

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

您可以使用

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查看有关该问题的基准。

Answer 14

var elem = document.querySelector(".a.b");