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


2060

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.


2
Byłoby miło, gdybyś mógł zdefiniować, co dla nas oznacza zjednoczenie i skrzyżowanie newbs :)
Kanion Kolob

10
@KolobCanyon zjednoczenie i przecięcie są podstawowymi pojęciami teorii mnogości. Tak więc, na przykład, związek byłby wszystkim francuskojęzycznym (obejmuje zarówno mężczyzn, jak i kobiety), podczas gdy skrzyżowaniem byłyby wszystkie kobiety, które mówią po francusku (wyklucza wszystkich, którzy nie mówią po francusku i wyklucza wszystkich ludzi, którzy nie są kobietami). Połączenia i skrzyżowania mogą być wykonane z dowolną liczbą charakterystyk określających każdy zestaw. en.wikipedia.org/wiki/Union_(set_theory) en.wikipedia.org/wiki/Intersection_(set_theory)
Katharine Osborne

6
Myślę, że masz na myśli, że z dwóch zestawów „kobiet” i „francuskojęzycznych” związkiem byłyby wszystkie kobiety na świecie i wszyscy francuskojęzyczni na świecie, zestaw obejmujący zarówno kobiety, które nie mówią Mężczyźni francuskojęzyczni i francuskojęzyczni. Skrzyżowanie to, jak pisałeś, tylko te kobiety, które mówią po francusku.
Teemu Leisti,

Odpowiedzi:


2625

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


9
@ Flater: To tylko dla przykładu. Ale może się przydać, jeśli klasy bi csą dodawane dynamicznie, a element chcesz wybrać tylko wtedy, gdy ma te klasy.
Sasha Chedygov

3
Aha, dobra uwaga :-) Do tej pory używałbym .hasClass (), ale jest to o wiele lepsza notacja.
Flater

4
Ta metoda wyboru działa również w CSS, np. .Ab {styl właściwości} patrz: css-tricks.com/multiple-class-id-selectors
Chris Halcrow

30
@Shimmy: Tak. Odstęp między dwoma selektorami oznacza, że ​​szukasz potomków; tzn. .a .bszuka elementów z klasą, bktóre są potomkami elementu z klasą a. Więc coś div azwróci jedynie aelementy, które są w środku w divelemencie.
Sasha Chedygov

2
@AaA: To nieprawda; tak było od początku jQuery, ponieważ tak działa CSS. Przecinek wybiera elementy, które pasują do jednego z selektorów (traktuj to jako logiczne OR), a nie oba, więc nie jest to to samo (chociaż widzę, że to może być mylące).
Sasha Chedygov

174

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

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

16
Jaka jest różnica między tą odpowiedzią a odpowiedzią zaakceptowaną?
Vivian River,

49
@Rice: Ten będzie nieco wolniejszy, ponieważ najpierw zbuduje listę obiektów z klasą „a”, a następnie usunie wszystkie oprócz tych, które mają klasę „b”, podczas gdy moje zrobi to w jednym kroku. Ale poza tym nie ma różnicy.
Sasha Chedygov

5
Działa to dla mnie w przypadku, gdy szukałem klasy zdefiniowanej jako zmienna, która nie działała ze składnią w pierwszym przykładzie. np .: $ ('. foo'). filter (zmienna). Dzięki
pac

7
@pac: $ ('.foo' + zmienna) powinien był załatwić sprawę, ale widzę, gdzie ta metoda byłaby w tym przypadku jaśniejsza.
Sasha Chedygov

6
Jest to również bardziej wydajne, jeśli już znalazłeś .ai musisz wielokrotnie filtrować na podstawie różnych arbitralnych klas, które również należą do oryginalnego .azestawu.
Qix - MONICA MISTREATED

123

W przypadku

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

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

$('.a .b.c')

Dodając do twojej odpowiedzi, chciałbym wiedzieć, jak uzyskać dostęp zarówno do b, jak i do poniższego przypadku: <element class = "a"> <element class = "b"> </element> <element class = "c" > </element> </element>? Poprzez $ („. A .b.c”) daje zły wynik.
Ipsita Rout,

Czy w tym przykładzie selektor $('.a .c.b')również działa?
Daniel W.

Tak, ponieważ kolejność nie ma znaczenia.
Zim84

$('.a > element')
Alex

63

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

38

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


26

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



20

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.


9

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

4

Nie potrzebujesz jQuerytego

W Vanillamożna zrobić:

document.querySelectorAll('.a.b')

To prawda w 2018 r., Ale nie od tego pytania zadawano w 2009 r.
Michiel

3

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

2

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 .


Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.