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


Ik wil alle elementen selecteren die de twee klassen hebben a en b.

<element class="a b">

Dus alleen de elementen die hebben beide klassen.

Wanneer ik gebruik $(".a, .b") het geeft me de unie, maar ik wil de kruising.


1771
2018-06-24 22:28


oorsprong


antwoorden:


Als je een kruising wilt, schrijf dan gewoon de selectors samen zonder ruimte tussenin.

$('.a.b')

Dus voor een element met een ID van a met lessen b en c, zou je schrijven:

$('#a.b.c')

2291
2018-06-24 22:30



U kunt dit doen met behulp van de filter() functie:

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

147
2018-06-24 22:34



Voor de zaak

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

Je zou er een ruimte tussen moeten plaatsen .a en .b.c

$('.a .b.c')

97
2018-03-25 20:31



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

Zie voor meer informatie het overzicht van de verschillende manieren om selectors hieronder te combineren!


Groepselector: ","

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

$('h1, p, a')

Multiples selector: "" (geen teken)

Selecteer alles <input> elementen van type  text, met lessen code en red :

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

Nakomelingen Selector: "" (spatie)

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

$('p i')

Child Selector: ">"

Selecteer alles <ul> elementen die directe kinderen van een zijn <li> element:

$('li > ul')

Aangrenzende Sibling Selector: "+"

Selecteer alles <a> elementen die onmiddellijk daarna worden geplaatst <h2> elementen:

$('h2 + a')

Algemene siblingkiezer: "~"

Selecteer alles <span> elementen die broers of zussen zijn van <div> elementen:

$('div ~ span')

45
2018-01-20 22:24



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


30
2018-04-19 07:19



Vanilla JavaScript-oplossing: -

document.querySelectorAll('.a.b')


23
2018-01-29 18:02



Noem maar een ander geval met element:

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

Typ gewoon: $("div#title1.A.B.C")


22
2017-12-14 16:15



Voor betere prestaties die u kunt gebruiken

$('div.a.b')

Dit zal alleen door de div-elementen kijken in plaats van alle HTML-elementen die u op uw pagina ziet te doorlopen.


16
2017-09-28 05:26



Groepskeuze

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

Wordt dit:

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

Dus in jouw geval heb je de groepselector geprobeerd, terwijl het een kruising is

$(".a, .b") 

gebruik dit in plaats daarvan

$(".a.b") 

6
2018-05-17 13:57



Je hebt niet nodig jQuery voor deze

In Vanilla je kunt doen:

document.querySelectorAll('.a.b')

1
2018-04-04 08:00