2009-06-24 22:28:58 8 Comments
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.
Related Questions
Sponsored Content
56 Answered Questions
[SOLVED] How do I check if an element is hidden in jQuery?
- 2008-10-07 13:03:18
- Philip Morton
- 2553996 View
- 7500 Score
- 56 Answer
- Tags: javascript jquery dom visibility
65 Answered Questions
[SOLVED] How to check whether a checkbox is checked in jQuery?
- 2009-05-23 15:16:39
- Prasad
- 4028891 View
- 4405 Score
- 65 Answer
- Tags: javascript jquery html checkbox
31 Answered Questions
[SOLVED] Get selected text from a drop-down list (select box) using jQuery
- 2009-10-29 12:02:09
- haddar
- 1984904 View
- 2244 Score
- 31 Answer
- Tags: javascript jquery drop-down-menu jquery-selectors
14 Answered Questions
[SOLVED] How to move an element into another element?
- 2009-08-14 20:14:45
- Mark Richman
- 1056065 View
- 1619 Score
- 14 Answer
- Tags: javascript jquery html
14 Answered Questions
[SOLVED] How can I select an element by name with jQuery?
- 2009-07-10 01:05:38
- T.T.T.
- 1396069 View
- 1165 Score
- 14 Answer
- Tags: javascript jquery html dom jquery-selectors
19 Answered Questions
[SOLVED] How can I get the ID of an element using jQuery?
- 2010-07-13 17:11:50
- fearofawhackplanet
- 1855810 View
- 1326 Score
- 19 Answer
- Tags: jquery jquery-selectors
13 Answered Questions
[SOLVED] event.preventDefault() vs. return false
- 2009-08-31 11:58:31
- RaYell
- 810890 View
- 2894 Score
- 13 Answer
- Tags: javascript jquery event-handling dom-events event-propagation
29 Answered Questions
[SOLVED] jQuery scroll to element
- 2011-07-13 09:49:44
- DiegoP.
- 2369276 View
- 2205 Score
- 29 Answer
- Tags: javascript jquery
34 Answered Questions
[SOLVED] How can I know which radio button is selected via jQuery?
- 2009-02-27 19:53:27
- juan
- 2082368 View
- 2590 Score
- 34 Answer
- Tags: javascript jquery html jquery-selectors radio-button
20 Answered Questions
[SOLVED] jQuery get specific option tag text
- 2008-10-13 04:06:34
- Paolo Bergantino
- 1054697 View
- 1211 Score
- 20 Answer
- Tags: javascript jquery drop-down-menu jquery-selectors
13 comments
@Savan 2019-10-10 08:05:11
your code
$(".a, .b")
will work for below multiple elements (at a same time)if you want to select element having a and b both class like
<element class="a b">
than use js without coma@Karim Ali 2019-10-04 17:16:26
var elem = document.querySelector(".a.b");
@Sasha Chedygov 2009-06-24 22:30:43
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:
The order is not relevant, so you can also swap the classes:
So to match a
div
element that has an ID ofa
with classesb
andc
, you would write:(In practice, you most likely don't need to get that specific, and an ID or class selector by itself is usually enough:
$('#a')
.)@Sasha Chedygov 2012-08-07 17:19:52
@Flater: It was just for the sake of example. But it might be useful if the classes
b
andc
are dynamically added, and you only want to select the element if it has those classes.@Flater 2012-08-08 08:29:16
Aha, good point :-) Up until now I would've used .hasClass() but this is a way better notation.
@Chris Halcrow 2012-08-26 23:54:11
This method of selection also works for CSS e.g. .a.b { style properties } see: css-tricks.com/multiple-class-id-selectors
@Shimmy 2013-05-09 05:16:12
Does a space between the class names make any difference?
@Sasha Chedygov 2013-05-12 23:49:01
@Shimmy: Yes. A space between two selectors means you're searching for descendants; i.e.
.a .b
searches for elements with classb
that are descendants of an element with classa
. So something likediv a
will only returna
elements that are inside adiv
element.@AaA 2015-10-13 09:04:20
it seems in jquery 1.10 you need to separate classes with comma
,
@Sasha Chedygov 2015-10-15 03:41:25
@AaA: 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).
@Abhijay Ghildyal 2016-11-16 14:21:10
is this wither class a or b, or is it class and b?
@Sasha Chedygov 2016-11-17 17:13:45
@AbhijayGhildyal: This is for elements that match both classes.
@Abhijay Ghildyal 2016-11-18 11:48:51
@sasha thanks. What do i do if I have an 'or' case? eg:- class A or class B
@Corey P 2018-10-16 17:28:17
@AbhijayGhildyal I know this is kind of late, but
$(.a,.b)
would do the trick.@bahman parsamanesh 2018-08-01 10:41:07
You can use
getElementsByClassName()
method for what you want.This is the fastest solution also. you can see a benchmark about that here.
@Sandwell 2018-04-04 08:00:13
You do not need
jQuery
for thisIn
Vanilla
you can do :@Michiel 2019-03-18 10:42:15
True in 2018, but not wnen this question was asked in 2009
@user2298171 2013-04-19 07:19:21
@Surya R Praveen 2017-05-17 13:57:26
Group Selector
Becomes this:
So in your case you have tried the group selector whereas its an intersection
instead use this
@Jamie Love 2009-06-24 22:34:38
You can do this using the
filter()
function:@Daniel Allen Langdon 2011-08-09 14:32:08
What is the difference between this answer and the accepted one?
@Sasha Chedygov 2011-09-08 09:39:38
@Rice: 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.
@pac 2012-02-09 22:28:22
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
@Sasha Chedygov 2012-02-14 10:19:58
@pac: $('.foo' + variable) should have done the trick, but I can see where this method would be clearer in that case.
@barrymac 2013-02-19 12:13:33
I can use this chained onto a .find for an exceptional situation
@Qix 2014-03-12 21:50:19
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.@user3281466 2014-09-08 11:53:42
@SashaChedygov 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") ?
@Sasha Chedygov 2014-09-08 17:27:06
@user3281466: 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, withoutfilter
:$('.a.b, .a.c')
@juanpaulo 2013-03-25 20:31:05
For the case
You would need to put a space in between
.a
and.b.c
@Ipsita Rout 2013-04-06 09:07:40
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.
@Mr47 2013-09-16 13:20:37
@IpsitaRout
$('.a .b, .a .c')
should do the trick@Daniel W. 2014-08-22 09:43:50
In this example, would the selector
$('.a .c.b')
also work ?@Zim84 2018-09-02 08:40:23
Yes, as the order does not matter.
@Alex 2018-09-03 11:54:33
$('.a > element')
@John Slegers 2016-01-20 22:24:46
The problem you're having, is that you are using a
Group Selector
, whereas you should be using aMultiples 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 :Multiples selector : "" (no character)
Select all
<input>
elements oftype
text
, with classescode
andred
:Descendant Selector : " " (space)
Select all
<i>
elements inside<p>
elements:Child Selector : ">"
Select all
<ul>
elements that are immediate children of a<li>
element:Adjacent Sibling Selector : "+"
Select all
<a>
elements that are placed immediately after<h2>
elements:General Sibling Selector : "~"
Select all
<span>
elements that are siblings of<div>
elements:@Tejas Shah 2015-09-28 05:26:30
For better performance you can use
This will look only through the div elements instead of stepping through all the html elements that you have on your page.
@Salman von Abbas 2015-01-29 18:02:58
Vanilla JavaScript solution:-
document.querySelectorAll('.a.b')
@macio.Jun 2012-12-14 16:15:11
Just mention another case with element:
E.g.
<div id="title1" class="A B C">
Just type:
$("div#title1.A.B.C")