How can I select an element with multiple classes in jQuery?
How can I select an element with multiple classes in jQuery?
Question
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.
Accepted Answer
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')
The order is not relevant, so you can also swap the classes:
$('.b.a')
So to match a div
element that has an ID of a
with classes b
and c
, you would write:
$('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')
.)
Read more… Read less…
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')
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')
$('.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>
Just mention another case with element:
E.g. <div id="title1" class="A B C">
Just type: $("div#title1.A.B.C")