ChatGPT解决这个技术问题 Extra ChatGPT

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

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.

It would be nice if you could define what union and intersection means for us newbs :)
@KolobCanyon union and intersection are basic set theory concepts. So for instance a union would be all French speakers (includes both men and women), whereas an intersection would be all women who speak French (excludes everyone who does not speak French, and excludes all people who are not women). Unions and intersections can be made with any number of characteristics defining each set. en.wikipedia.org/wiki/Union_(set_theory) en.wikipedia.org/wiki/Intersection_(set_theory)
I think you mean that of the two sets "women" and "French-speakers", the union would be all the women in the world and all the French-speakers in the world, a set that includes both women who don't speak French and French-speaking men. The intersection is, as you wrote, only those women who speak French.

S
Sasha Chedygov

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


@Flater: It was just for the sake of example. But it might be useful if the classes b and c are dynamically added, and you only want to select the element if it has those classes.
@Shimmy: Yes. A space between two selectors means you're searching for descendants; i.e. .a .b searches for elements with class b that are descendants of an element with class a. So something like div a will only return a elements that are inside a div element.
B
Ben Everard

You can do this using the filter() function:

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

What is the difference between this answer and the accepted one?
@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.
K
Kenly

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

J
John Slegers

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

b
beaver

$('.a .b , .a .c').css('border', '2px solid yellow'); //selects b and c

a
b
c
d


m
macio.Jun

Just mention another case with element:

E.g. <div id="title1" class="A B C">

Just type: $("div#title1.A.B.C")


S
Salman von Abbas

Vanilla JavaScript solution:-

document.querySelectorAll('.a.b')


T
Tejas Anil Shah

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.


R
Robert Oschler

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

S
Surya R Praveen

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") 

S
Sandwell

You do not need jQuery for this

In Vanilla you can do :

document.querySelectorAll('.a.b')

G
Gauri Bhosle

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

a
b
c
d
e
f


b
bahman parsamanesh

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]);

  • a
  • a, b
  • a, b, c

This is the fastest solution also. you can see a benchmark about that here.


K
Karim Ali

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