如何在 jQuery 中选择具有多个类的元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1041344/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I select an element with multiple classes in jQuery?
提问by Mladen
I want to select all the elements that have the two classes aand b.
我想选择所有具有两个类a和b.
<element class="a b">
So, only the elements that have bothclasses.
因此，只有具有这两个类的元素。
When I use $(".a, .b")it gives me the union, but I want the intersection.
当我使用$(".a, .b")它时，它给了我联合，但我想要交集。
回答by Sasha Chedygov
If you want to match only elements with bothclasses (an intersection, like a logical AND), just write the selectors together without spacesin between:
如果您只想匹配具有两个类的元素（交集，如逻辑 AND），只需将选择器写在一起，中间没有空格：
$('.a.b')
The order is not relevant, so you can also swap the classes:
顺序不相关，因此您也可以交换类：
$('.b.a')
So to match a divelement that has an ID of awith classes band c, you would write:
因此，要匹配具有类和divID 的元素，您可以编写：abc
$('div#a.b.c')
(In practice, you most likely don't need to get that specific, and an ID or class selector by itself is usually enough: $('#a').)
（在实践中，您很可能不需要获得特定的信息，ID 或类选择器本身通常就足够了：$('#a')。）
回答by Jamie Love
回答by juanpaulo
For the case
对于这种情况
<element class="a">
<element class="b c">
</element>
</element>
You would need to put a space in between .aand .b.c
你需要在.a和之间留一个空格.b.c
$('.a .b.c')
回答by John Slegers
The problem you're having, is that you are using a Group Selector, whereas you should be using a Multiples selector! To be more specific, you're using $('.a, .b')whereas you should be using $('.a.b').
您遇到的问题是您使用的是 a Group Selector，而您应该使用Multiples selector! 更具体地说，您正在使用$('.a, .b')而您应该使用$('.a.b').
For more information, see the overview of the different ways to combine selectors herebelow!
有关更多信息，请参阅下面组合选择器的不同方法的概述！
Group Selector : ","
组选择器：“，”
Select all <h1>elements AND all <p>elements AND all <a>elements :
选择所有<h1>元素 AND 所有<p>元素 AND 所有<a>元素：
$('h1, p, a')
Multiples selector : "" (no character)
倍数选择器：""（无字符）
Select all <input>elements of typetext, with classes codeand red:
选择 的所有<input>元素typetext，包括类code和red：
$('input[type="text"].code.red')
Descendant Selector : " " (space)
后代选择器：“”（空格）
Select all <i>elements inside <p>elements:
选择<i>元素内的所有<p>元素：
$('p i')
Child Selector : ">"
子选择器：“>”
Select all <ul>elements that are immediate children of a <li>element:
选择<ul>元素的直接子元素的所有元素<li>：
$('li > ul')
Adjacent Sibling Selector : "+"
相邻兄弟选择器：“+”
Select all <a>elements that are placed immediately after <h2>elements:
选择<a>紧跟在<h2>元素之后的所有元素：
$('h2 + a')
General Sibling Selector : "~"
一般兄弟选择器：“~”
Select all <span>elements that are siblings of <div>elements:
选择所有<span>元素的兄弟<div>元素：
$('div ~ span')
回答by user2298171
$('.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>回答by Salman von Abbas
Vanilla JavaScript solution:-
香草 JavaScript 解决方案：-
document.querySelectorAll('.a.b')
document.querySelectorAll('.a.b')
回答by macio.Jun
Just mention another case with element:
只需提及另一个带有元素的案例：
E.g. <div id="title1" class="A B C">
例如 <div id="title1" class="A B C">
Just type: $("div#title1.A.B.C")
只需输入： $("div#title1.A.B.C")
回答by Tejas Shah
For better performance you can use
为了获得更好的性能，您可以使用
$('div.a.b')
This will look only through the div elements instead of stepping through all the html elements that you have on your page.
这将只查看 div 元素，而不是单步查看页面上的所有 html 元素。
回答by Surya R Praveen
Group Selector
组选择器
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;}
Becomes this:
变成这样：
body, th, td {font-size: 12px; font-family: arial, helvetica, sans-serif;}
So in your case you have tried the group selector whereas its an intersection
因此，在您的情况下，您尝试了组选择器，而它是一个交叉点
$(".a, .b")
instead use this
而是使用这个
$(".a.b")
回答by Sandwell
You do not need jQueryfor this
你不需要jQuery这个
In Vanillayou can do :
在Vanilla你可以这样做：
document.querySelectorAll('.a.b')
