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


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

<element class="a b">

所以,只有拥有的元素  类。

我用的时候 $(".a, .b") 它给了我联盟,但我想要交集。


1774
2018-06-24 22:28


起源


如果你可以为我们的newbs定义什么联合和交集意味着将是很好的:) - Kolob Canyon
@KolobCanyon联合和交集是基本集理论的概念。因此,例如一个工会将是所有讲法语的人(包括男性和女性),而一个交叉点将是所有说法语的女性(不包括所有不讲法语的人,并且排除所有不是女性的人)。可以使用定义每个集合的任意数量的特征来制作联合和交叉。 en.wikipedia.org/wiki/Union_(set_theory)  en.wikipedia.org/wiki/Intersection_(set_theory) - Katharine Osborne
我认为你的意思是“女性”和“讲法语”这两套,工会将是世界上所有女性和世界上所有讲法语的人,包括不讲话的女性讲法语和法语的人。正如你所写的那样,这个交叉点只有那些说法语的女性。 - Teemu Leisti


答案:


如果你想要一个交集,只需将选择器一起写 没有空格 在之间。

$('.a.b')

所以对于ID为的元素 a 与课程 b 和 c,你会写:

$('#a.b.c')

2293
2018-06-24 22:30



@Flater:这只是为了举个例子。但是如果课程可能会有用 b 和 c 动态添加,您只想选择具有这些类的元素。 - Sasha Chedygov
啊哈,好点:-)到现在为止,我会使用.hasClass(),但这是一种更好的符号。 - Flater
这种选择方法也适用于CSS,例如.a.b {style properties}见: css-tricks.com/multiple-class-id-selectors - Chris Halcrow
@Shimmy:是的。两个选择器之间的空格意味着您正在搜索后代;即 .a .b用类搜索元素 b 它是具有类的元素的后代 a。所以像 div a 只会回来 a 是的元素 内 一个 div 元件。 - Sasha Chedygov
@AaA:那是不对的;自jQuery开始以来就是这样,因为这就是CSS的工作方式。逗号选择与任一选择器匹配的元素(将其视为逻辑OR),而不是两者,因此它不是一回事(尽管我可以看到这可能会让人感到困惑)。 - Sasha Chedygov


你可以使用 filter() 功能:

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

147
2018-06-24 22:34



这个答案和被接受的答案有什么区别? - Daniel Allen Langdon
@Rice:这个会慢一点,因为它会首先构建一个带有“a”类的对象列表,然后删除除了那些有“b”类的对象之外的所有对象,而我会一步完成。但除此之外,没有区别。 - Sasha Chedygov
这对我来说很有用,我正在搜索一个定义为变量的类,这个类与第一个例子中的语法不兼容。例如:$('。foo')。filter(变量)。谢谢 - pac
@pac:$('。foo'+变量)应该已经完成​​了这个技巧,但我可以看到这种方法在这种情况下更清晰。 - Sasha Chedygov
如果您已经找到,这也更有效 .a并且需要根据也属于原始的不同任意类进行多次过滤 .a 组。 - Qix


对于这种情况

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

你需要在它们之间放一个空格 .a 和 .b.c

$('.a .b.c')

97
2018-03-25 20:31



如果情况如下,我想知道如何访问b和c:<element class =“a”> <element class =“b”> </ element> <element class =“c” > </ element> </ element>?通过$('。a .b.c')给出了错误的结果。 - Ipsita Rout
@IpsitaRout $('.a .b, .a .c') 应该做的伎俩 - Mr47
在这个例子中,是选择器 $('.a .c.b') 也工作? - DanFromGermany


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

45
2018-01-20 22:24





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


30
2018-04-19 07:19





Vanilla JavaScript解决方案: -

document.querySelectorAll('.a.b')


23
2018-01-29 18:02





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

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

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


22
2017-12-14 16:15