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    lt element class  a b  gt    So  only the elements that have both classes   When I use     a   b   it gives me the union  but I want the intersection

User · Answer

your code     a   b   will work for below multiple elements  at a same time    lt element class  a  gt   lt element class  b  gt    if you want to select element having a and b both class like  lt element class  a b  gt  than use js without coma      a b

User · Answer

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

User · Answer

Just mention another case with element   E g   lt div id  title1  class  A B C  gt   Just type     div title1 A B C

User · Answer

You do not need jQuery for this  In Vanilla you can do    document querySelectorAll   a b

User · 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

User · Answer

Vanilla JavaScript solution -  document querySelectorAll   a b

User · Answer

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  lt h1 gt  elements AND all  lt p gt  elements AND all  lt a gt  elements       h1  p  a     Multiples selector       no character   Select all  lt input gt  elements of type text  with classes code and red       input type  text   code red     Descendant Selector        space   Select all  lt i gt  elements inside  lt p gt  elements       p i     Child Selector        Select all  lt ul gt  elements that are immediate children of a  lt li gt  element      li  gt  ul     Adjacent Sibling Selector        Select all  lt a gt  elements that are placed immediately after  lt h2 gt  elements      h2   a     General Sibling Selector        Select all  lt span gt  elements that are siblings of  lt div gt  elements       div   span

User · Answer

You can do this using the filter   function       a   filter   b

User · Answer

x000D   x000D      a  b    a  c   css  border    2px solid yellow    x000D    selects b and c x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   x000D   lt div class  a  gt a x000D     lt div class  b  gt b lt  div gt  x000D     lt div class  c  gt c lt  div gt  x000D     lt div class  d  gt d lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

var elem   document querySelector   a b

User · Answer

You can use getElementsByClassName   method for what you want    x000D   x000D  var elems   document getElementsByClassName  a b c    x000D  elems 0  style color    green   x000D  console log elems 0    x000D   lt ul gt  x000D     lt li class  a  gt a lt  li gt  x000D     lt li class  a b  gt a  b lt  li gt  x000D     lt li class  a b c  gt a  b  c lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D    This is the fastest solution also  you can see a benchmark about that here

User · Answer

For the case   lt element class  a  gt     lt element class  b c  gt     lt  element gt   lt  element gt    You would need to put a space in between  a and  b c      a  b c

User · Answer

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

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

Examples related to jquery

Examples related to jquery-selectors