Hoe kan ik een element met meerdere klassen selecteren in jQuery?

Ik wil alle elementen selecteren die de twee klassen aen bhebben.

<element class="a b">

Dus alleen de elementen die beideklassen hebben.

Als ik $(".a, .b")gebruik, krijg ik de vakbond, maar ik wil de kruising.

Antwoord 1, autoriteit 100%

Als je alleen elementen wilt matchen met beideklassen (een intersectie, zoals een logische AND), schrijf dan de selectors samen zonder spatiesertussen:

$('.a.b')

De volgorde is niet relevant, dus je kunt de klassen ook omwisselen:

$('.b.a')

Dus om een ​​div-element met een ID van ate matchen met de klassen ben c, moet je zou schrijven:

$('div#a.b.c')

(In de praktijk heb je dat specifieke waarschijnlijk niet nodig, en een ID- of klassenkiezer op zich is meestal voldoende: $('#a').)

Antwoord 2, autoriteit 6%

U kunt dit doen met de functie filter():

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

Antwoord 3, autoriteit 5%

Voor het geval

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

U moet een spatie plaatsen tussen .aen .b.c

$('.a .b.c')

Antwoord 4, autoriteit 3%

Het probleem dat u ondervindt, is dat u een Group Selectorgebruikt, terwijl u een Multiples selectorzou moeten gebruiken! Om specifieker te zijn, je gebruikt $('.a, .b')terwijl je $('.a.b')zou moeten gebruiken.

Voor meer informatie, zie hieronder het overzicht van de verschillende manieren om selectors te combineren!

Groepskiezer: “,”

Selecteer alle <h1>elementen EN alle <p>elementen EN alle <a>elementen :

$('h1, p, a')

Selectie meervouden: “” (geen teken)

Selecteer alle <input>elementen van typetext, met klassen codeen red:

$('input[type="text"].code.red')

Afstammelingkiezer: ” ” (spatie)

Selecteer alle <i>elementen binnen <p>elementen:

$('p i')

Kinderselectie: “>”

Selecteer alle <ul>elementen die directe onderliggende elementen zijn van een <li>element:

$('li > ul')

Aangrenzende broer/zus-kiezer: “+”

Selecteer alle <a>elementen die direct na <h2>elementen worden geplaatst:

$('h2 + a')

Algemene broer/zus-kiezer: “~”

Selecteer alle <span>elementen die broers en zussen zijn van <div>elementen:

$('div ~ span')

Antwoord 5

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

$('div.a.b')

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;}

body, th, td {font-size: 12px; font-family: arial, helvetica, sans-serif;}

$(".a, .b") 

$(".a.b") 

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

$('.a.b')

document.querySelectorAll('.a.b')

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>

//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>