How can I select an element with multiple classes in jQuery?

ID : 384

viewed : 210

Tags : jqueryjquery-selectorsjquery





Top 5 Answer for How can I select an element with multiple classes in jQuery?

vote vote

98

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

vote vote

87

You can do this using the filter() function:

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

70

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

63

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

56

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

Top 3 video Explaining How can I select an element with multiple classes in jQuery?







Related QUESTION?