Jak mogę wybrać element z wieloma klasami w jQuery?

Chcę wybrać wszystkie elementy, które mają dwie klasy ai b.

<element class="a b">

Tak więc tylko elementy, które mają obie klasy.

Kiedy $(".a, .b")go używam , daje mi związek, ale chcę skrzyżowania.

Jeśli chcesz dopasować tylko elementy do obu klas (przecięcie, jak logiczne AND), po prostu napisz selektory razem bez spacji między:

$('.a.b')

Kolejność nie jest istotna, więc możesz także zamieniać klasy:

$('.b.a')

Tak aby dopasować divelement, który ma identyfikator az klas bi c, byś napisać:

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

(W praktyce, najprawdopodobniej nie trzeba się tego specyficznego i ID lub klasy selektor sama jest zwykle na tyle: $('#a')).

Możesz to zrobić za pomocą filter()funkcji:

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

W przypadku

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

Musisz wstawić spację pomiędzy .ai.b.c

$('.a .b.c')

Problemem jest to, że używasz Group Selector, podczas gdy powinieneś używać Multiples selector! Mówiąc ściślej, używasz, $('.a, .b')podczas gdy powinieneś używać $('.a.b').

Aby uzyskać więcej informacji, zapoznaj się z omówieniem różnych sposobów łączenia selektorów poniżej!

Selektor grup: „,”

Wybierz wszystkie <h1>elementy ORAZ wszystkie <p>elementy ORAZ wszystkie <a>elementy:

$('h1, p, a')

Selektor wielokrotności: „” (bez znaku)

Wybierz wszystkie <input>elementy type text, z klasami codei red:

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

Selector Descendant: „” (spacja)

Wybierz wszystkie <i>elementy wewnątrz <p>elementów:

$('p i')

Selektor potomków: „>”

Wybierz wszystkie <ul>elementy, które są bezpośrednimi elementami potomnymi <li>elementu:

$('li > ul')

Sąsiadujący selektor rodzeństwa: „+”

Wybierz wszystkie <a>elementy, które są umieszczane bezpośrednio po <h2>elementach:

$('h2 + a')

Selektor generalny rodzeństwa: „~”

Wybierz wszystkie <span>elementy, które są rodzeństwem <div>elementów:

$('div ~ span')

Wystarczy wspomnieć o innym przypadku z elementem:

Na przykład <div id="title1" class="A B C">

Po prostu wpisz: $("div#title1.A.B.C")

Waniliowe rozwiązanie JavaScript: -

document.querySelectorAll('.a.b')

Aby uzyskać lepszą wydajność, możesz użyć

$('div.a.b')

Spowoduje to przejrzenie tylko elementów div zamiast przejścia przez wszystkie elementy HTML, które masz na swojej stronie.

Selektor grup

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

Staje się to:

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

Więc w twoim przypadku próbowałeś selektora grupy, podczas gdy jest to skrzyżowanie

$(".a, .b") 

zamiast tego użyj tego

$(".a.b") 

Nie potrzebujesz jQuerytego

W Vanillamożna zrobić:

document.querySelectorAll('.a.b')

twój kod $(".a, .b")będzie działał dla wielu elementów (jednocześnie)

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

jeśli chcesz wybrać element mający klasę a i b, podobnie <element class="a b">jak użyj js bez przecinka

$('.a.b')

Możesz użyć getElementsByClassName()metody do tego, co chcesz.

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>

Jest to również najszybsze rozwiązanie. widać odniesienia o tym tutaj .

var elem = document.querySelector (". ab");