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

I want to select all the elements that have the two classes a and b.

<element class="a b">

So, only the elements that have both classes.

When I use $(".a, .b") it gives me the union, but I want the intersection.

转载于:https://stackoverflow.com/questions/1041344/how-can-i-select-an-element-with-multiple-classes-in-jquery

csdnceshi76
斗士狗 I think you mean that of the two sets "women" and "French-speakers", the union would be all the women in the world and all the French-speakers in the world, a set that includes both women who don't speak French and French-speaking men. The intersection is, as you wrote, only those women who speak French.
大约 4 年之前 回复
csdnceshi65
larry*wei union and intersection are basic set theory concepts. So for instance a union would be all French speakers (includes both men and women), whereas an intersection would be all women who speak French (excludes everyone who does not speak French, and excludes all people who are not women). Unions and intersections can be made with any number of characteristics defining each set. en.wikipedia.org/wiki/Union_(set_theory) en.wikipedia.org/wiki/Intersection_(set_theory)
大约 4 年之前 回复
weixin_41568110
七度&光 It would be nice if you could define what union and intersection means for us newbs :)
4 年多之前 回复

11个回答

If you want to match only elements with both classes (an intersection, like a logical AND), just write the selectors together without spaces in between:

$('.a.b')

So for a div element that has an ID of a with classes b and c, you would write:

$('div#a.b.c')
csdnceshi60
℡Wang Yan I know this is kind of late, but $(.a,.b) would do the trick.
接近 2 年之前 回复
weixin_41568184
叼花硬汉 thanks. What do i do if I have an 'or' case? eg:- class A or class B
接近 4 年之前 回复
weixin_41568196
撒拉嘿哟木头 This is for elements that match both classes.
接近 4 年之前 回复
weixin_41568184
叼花硬汉 is this wither class a or b, or is it class and b?
接近 4 年之前 回复
weixin_41568196
撒拉嘿哟木头 That's incorrect; it's been this way since the beginning of jQuery, because that's how CSS works. A comma selects elements that match either of the selectors (think of it as a logical OR), not both, so it's not the same thing (though I can see how that might be confusing).
接近 5 年之前 回复
csdnceshi72
谁还没个明天 it seems in jquery 1.10 you need to separate classes with comma ,
接近 5 年之前 回复
weixin_41568196
撒拉嘿哟木头 Yes. A space between two selectors means you're searching for descendants; i.e. .a .b searches for elements with class b that are descendants of an element with class a. So something like div a will only return a elements that are inside a div element.
7 年多之前 回复
csdnceshi76
斗士狗 Does a space between the class names make any difference?
7 年多之前 回复
csdnceshi52
妄徒之命 This method of selection also works for CSS e.g. .a.b { style properties } see: css-tricks.com/multiple-class-id-selectors
大约 8 年之前 回复
csdnceshi62
csdnceshi62 Aha, good point :-) Up until now I would've used .hasClass() but this is a way better notation.
大约 8 年之前 回复
weixin_41568196
撒拉嘿哟木头 It was just for the sake of example. But it might be useful if the classes b and c are dynamically added, and you only want to select the element if it has those classes.
大约 8 年之前 回复

You can do this using the filter() function:

$(".a").filter(".b")
csdnceshi72
谁还没个明天 Close, but no. .b .c looks for a div with class "c" inside of a div with class "b". What you're looking for is $('.a').filter('.b, .c'). Or, without filter: $('.a.b, .a.c')
大约 6 年之前 回复
csdnceshi70
笑故挽风 So if I have 3 div elements with classes 'a b', 'a c', 'a d' (respectively) and want to select the divs that have the class a AND either the class b or the class c, is this how I can achieve it: $(".a").filter(".b .c") ?
大约 6 年之前 回复
weixin_41568134
MAO-EYE This is also more efficient if you have already found .a's and need to filter multiple times based different arbitrary classes that also belong to the original .a set.
6 年多之前 回复
csdnceshi50
三生石@ I can use this chained onto a .find for an exceptional situation
7 年多之前 回复
csdnceshi72
谁还没个明天 $('.foo' + variable) should have done the trick, but I can see where this method would be clearer in that case.
8 年多之前 回复
csdnceshi68
local-host This worked for me in an instance where I was searching for a class defined as a variable, which didn't work with the syntax in the first example. eg: $('.foo').filter(variable). Thanks
8 年多之前 回复
csdnceshi72
谁还没个明天 This one will be a little bit slower, because it will build a list of objects with class "a" first, then remove all but those that have class "b", whereas mine does this in one step. But otherwise, no difference.
大约 9 年之前 回复
csdnceshi62
csdnceshi62 What is the difference between this answer and the accepted one?
大约 9 年之前 回复

For the case

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

You would need to put a space in between .a and .b.c

$('.a .b.c')
csdnceshi79
python小菜 $('.a > element')
大约 2 年之前 回复
weixin_41568110
七度&光 Yes, as the order does not matter.
大约 2 年之前 回复
csdnceshi62
csdnceshi62 In this example, would the selector $('.a .c.b') also work ?
大约 6 年之前 回复
weixin_41568131
10.24 $('.a .b, .a .c') should do the trick
大约 7 年之前 回复
weixin_41568196
撒拉嘿哟木头 Adding to your answer I would like to know how to access both b and c if the case is as below:<element class="a"><element class="b"></element><element class="c"></element> </element> ? Through $('.a .b.c') gives wrong result.
7 年多之前 回复

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').

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, p, a')

Multiples selector : "" (no character)

Select all <input> elements of type text, with classes code and red :

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

Descendant Selector : " " (space)

Select all <i> elements inside <p> elements:

$('p i')

Child Selector : ">"

Select all <ul> elements that are immediate children of a <li> element:

$('li > ul')

Adjacent Sibling Selector : "+"

Select all <a> elements that are placed immediately after <h2> elements:

$('h2 + a')

General Sibling Selector : "~"

Select all <span> elements that are siblings of <div> elements:

$('div ~ span')

Vanilla JavaScript solution:-

document.querySelectorAll('.a.b')

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

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.

Just mention another case with element:

E.g. <div id="title1" class="A B C">

Just type: $("div#title1.A.B.C")

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

</div>

You can use getElementsByClassName() method for what you want.

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>

This is the fastest solution also. you can see a benchmark about that here.

</div>
共11条数据 1 尾页
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐