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

Viewed 1044966

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.

14 Answers

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

You can do this using the filter() function:

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

your code $(".a, .b") will work for below multiple elements (at a same time)

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

if you want to select element having a and b both class like <element class="a b"> than use js without comma

$('.a.b')

Below example will give you idea about to select at a time multiple nested class selectors and direct class selectors in one line

//Here is Explaination of Selectors  
//.a .b .c  = selects nested child c which is inside of div a and b
//.a .d     = selects nested child d which is inside of div a 
//.f        = selects direct element ie div f which is outside of div a and b
$('.a .b .c , .a .d, .f').css('background-color', 'grey');
<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 class="c">c</div>
  </div> 
  <div class="d">d</div>
</div>
<div class="e">e</div>
<div class="f">f</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.

var elem = document.querySelector(".a.b");

Related