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.
This question is related to
jquery
jquery-selectors
You do not need jQuery
for this
In Vanilla
you can do :
document.querySelectorAll('.a.b')
You can do this using the filter()
function:
$(".a").filter(".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.
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")
Just mention another case with element:
E.g. <div id="title1" class="A B C">
Just type: $("div#title1.A.B.C")
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 coma
$('.a.b')
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!
Select all <h1>
elements AND all <p>
elements AND all <a>
elements :
$('h1, p, a')
Select all <input>
elements of type
text
, with classes code
and red
:
$('input[type="text"].code.red')
Select all <i>
elements inside <p>
elements:
$('p i')
Select all <ul>
elements that are immediate children of a <li>
element:
$('li > ul')
Select all <a>
elements that are placed immediately after <h2>
elements:
$('h2 + a')
Select all <span>
elements that are siblings of <div>
elements:
$('div ~ span')
You can use getElementsByClassName()
method for what you want.
var elems = document.getElementsByClassName("a b c");_x000D_
elems[0].style.color = "green";_x000D_
console.log(elems[0]);
_x000D_
<ul>_x000D_
<li class="a">a</li>_x000D_
<li class="a b">a, b</li>_x000D_
<li class="a b c">a, b, c</li>_x000D_
</ul>
_x000D_
This is the fastest solution also. you can see a benchmark about that here.
$('.a .b , .a .c').css('border', '2px solid yellow');_x000D_
//selects b and c
_x000D_
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
_x000D_
<div class="a">a_x000D_
<div class="b">b</div>_x000D_
<div class="c">c</div>_x000D_
<div class="d">d</div>_x000D_
</div>
_x000D_
var elem = document.querySelector(".a.b");
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')
Source: Stackoverflow.com