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

2060

我要选择所有具有两个类的元素a和b。

<element class="a b">

因此，只有具有两个类的元素。

当我使用$(".a, .b")它时，会给我工会，但是我想要交集。

jquery jquery-selectors

— 姆拉登
source

2

如果您可以定义联合和交叉点对我们来说意味着什么，那就太好了：)

— Kolob Canyon

10

@KolobCanyon联合和交集是基本的集合论概念。因此，例如，一个工会将是所有讲法语的人（包括男性和女性），而一个十字路口将是所有讲法语的妇女（不包括所有不讲法语的人，并排除所有不是女性的人）。可以使用定义每个集合的任意数量的特征进行并集和相交。en.wikipedia.org/wiki/Union_(set_theory）en.wikipedia.org/wiki/Intersection_(set_theory）–

— 凯瑟琳·奥斯本

6

我认为您的意思是说，在“女性”和“讲法语的人”这两个词集中，工会将是世界上所有妇女和世界上所有讲法语的人，其中包括不说话的妇女法语和说法语的人。正如您所写的那样，十字路口仅是那些会说法语的女性。

— Teemu Leisti

2625

如果只想匹配两个类的元素（一个交集，如逻辑AND），则只需将选择器写在一起，而在它们之间不能有空格：

$('.a.b')

顺序无关紧要，因此您也可以交换类：

$('.b.a')

因此，要匹配divID为的a带有类b和的元素c，您应编写：

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

（在实践中，您很可能不需要具体说明，通常一个ID或类选择器本身就足够了：）$('#a')。

— 萨莎·切迪格夫（Sasha Chedygov）
source

9

@Flater：只是为了举例。但是，如果类b和c是动态添加的，则可能会很有用，并且仅当元素具有这些类时才要选择该元素。

— Sasha Chedygov

3

啊哈，好点子:-)到目前为止，我将使用.hasClass（），但这是一种更好的表示法。

— 2012年

4

这种选择方法也适用于CSS，例如.ab {样式属性}参见：css-tricks.com/multiple-class-id-selectors

— Chris Halcrow

30

@Shimmy：是的。两个选择器之间的空格表示您正在搜索后代。即.a .b搜索具有class的元素，b这些元素是具有class 的元素的后代a。因此，类似这样的操作div a只会返回a元素内部的div元素。

— Sasha Chedygov

2

@AaA：那是不对的；自从jQuery诞生以来就是这样，因为CSS就是这样工作的。逗号会选择与两个选择器中的一个匹配的元素（将其视为逻辑或），而不是两个，因此不是一回事（尽管我可以看出这可能令人困惑）。

— Sasha Chedygov

174

您可以使用以下filter()功能执行此操作：

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

— 杰米·洛夫（Jamie Love）
source

16

这个答案和被接受的答案有什么区别？

— 维维安河

49

@Rice：这个会慢一点，因为它将首先建立一个类别为“ a”的对象的列表，然后删除所有那些类别为“ b”的对象，而我的则一步完成。但除此之外，没有区别。

— Sasha Chedygov

5

在我正在搜索定义为变量的类的实例中，这对我有用，在第一个示例中，该类不适用于语法。例如：$（'。foo'）。filter（variable）。谢谢

— pac

7

@pac：$（'。foo'+ variable）应该可以解决问题，但是我可以看到在这种情况下该方法在哪里更清晰。

— Sasha Chedygov

6

如果您已经找到了.a，并且需要基于也属于原始.a集合的不同任意类进行多次过滤，则这样做的效率也更高。

— Qix-蒙尼卡（Monica）错误，

123

对于这种情况

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

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

$('.a .b.c')

— 胡安保罗
source

添加到您的答案中，如果情况如下，我想知道如何访问b和c：<element class =“ a”> <element class =“ b”> </ element> <element class =“ c” > </ element> </ element>？通过$（'。a .b.c'）给出错误的结果。

— Ipsita Rout

在此示例中，选择器$('.a .c.b')也可以工作吗？

— Daniel W.

是的，因为顺序无关紧要。

— Zim84 '18

$('.a > element')

— 亚历克斯（Alex）

63

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

— 约翰·斯莱格斯
source

38

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

展开摘要

— 用户名
source

26

只需提及带有元素的另一种情况：

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

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

— 马西奥
source

26

香草JavaScript解决方案：-

document.querySelectorAll('.a.b')

— 萨尔曼·冯·阿巴斯
source

20

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

$('div.a.b')

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

— 特雅斯沙（Tejas Shah）
source

9

组选择器

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

— 苏里亚·普拉文（Surya R Praveen）
source

4

您不需要jQuery这个

在Vanilla你可以做到：

document.querySelectorAll('.a.b')

— 桑德威尔
source

确实在2018年，但不是未知的2009

— Michiel

3

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

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

如果您想选择具有a和b两个类的元素，则<element class="a b">比不使用逗号的js更喜欢

$('.a.b')

— 萨凡
source

2

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

展开摘要

这也是最快的解决方案。您可以在此处查看有关的基准。

— 巴曼帕萨曼尼什
source

1

var elem = document.querySelector（“。ab”）;

— 卡里姆·阿里（Karim Ali）
source