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


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

<element class="a b">

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

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


1774
2018-06-24 22:28


pochodzenie


Byłoby miło, gdybyś mógł zdefiniować, co dla nas oznacza związek i skrzyżowanie :) - Kolob Canyon
@KolobCanyon union i intersection to podstawowe pojęcia teorii zbiorów. Na przykład związek zawodowy byłby wyłącznie francuskim (dotyczy to zarówno kobiet, jak i mężczyzn), podczas gdy na skrzyżowaniu byłyby wszystkie kobiety, które mówią po francusku (z wyłączeniem wszystkich, którzy nie mówią po francusku i nie obejmują wszystkich osób, które nie są kobietami). Związki i przecięcia mogą być wykonane z dowolną liczbą cech określających każdy zestaw. en.wikipedia.org/wiki/Union_(set_theory)  en.wikipedia.org/wiki/Intersection_(set_theory) - Katharine Osborne
Myślę, że masz na myśli to, że z dwóch zestawów "kobiety" i "francuskojęzyczni", związkiem będą wszystkie kobiety na świecie i wszyscy francuscy prelegenci na świecie, zestaw obejmujący obie kobiety, które nie mówią Francuzi i francuskojęzyczni mężczyźni. Skrzyżowanie to, jak pisałeś, tylko te kobiety, które mówią po francusku. - Teemu Leisti


Odpowiedzi:


Jeśli chcesz przecięcia, po prostu napisz razem selektory bez przestrzeni pomiędzy.

$('.a.b')

Tak więc dla elementu, który ma identyfikator a z klasami b i c, napiszesz:

$('#a.b.c')

2293
2018-06-24 22:30



@ Flater: To było tylko ze względu na przykład. Ale może się przydać, jeśli chodzi o zajęcia b i c są dodawane dynamicznie i chcesz tylko wybrać element, jeśli ma on te klasy. - Sasha Chedygov
Aha, dobry punkt :-) Do tej pory używałbym .hasClass (), ale jest to sposób na lepszą notację. - Flater
Ta metoda selekcji działa również w przypadku CSS, np. .a.b {Właściwości stylu} zobacz: css-tricks.com/multiple-class-id-selectors - Chris Halcrow
@Shimmy: Tak. Przestrzeń między dwoma selektorami oznacza, że ​​szukasz potomków; to znaczy .a .b wyszukuje elementy z klasą b są potomkami elementu z klasą a. Więc coś w stylu div a powróci tylko a elementy, które są wewnątrz za div element. - Sasha Chedygov
@AaA: To jest nieprawidłowe; tak było od początku jQuery, ponieważ tak działa CSS. Przecinek wybiera elementy, które pasują do któregoś z selektorów (traktuj to jako logiczne OR), a nie oba, więc to nie to samo (chociaż widzę, że może to być mylące). - Sasha Chedygov


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

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

147
2018-06-24 22:34



Jaka jest różnica między tą odpowiedzią a akceptowaną? - Daniel Allen Langdon
@Rice: Ten będzie trochę wolniejszy, ponieważ stworzy najpierw listę obiektów z klasą "a", a następnie usunie wszystkie oprócz tych, które mają klasę "b", podczas gdy moja robi to w jednym kroku. Ale poza tym, nie ma różnicy. - Sasha Chedygov
To działało dla mnie w instancji, w której szukałem klasy zdefiniowanej jako zmienna, która nie działała ze składnią w pierwszym przykładzie. np .: $ (".foo"). filter (zmienny). Dzięki - pac
@pac: $ (zmienna '. foo') powinna była załatwić sprawę, ale widzę, gdzie ta metoda byłaby w tym przypadku bardziej przejrzysta. - Sasha Chedygov
Jest to również bardziej efektywne, jeśli już znalazłeś .ai muszą filtrować wiele razy w oparciu o różne dowolne klasy, które również należą do oryginału .a zestaw. - Qix


Dla sprawy

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

Będziesz musiał umieścić spację pomiędzy .a i .b.c

$('.a .b.c')

97
2018-03-25 20:31



Dodając do twojej odpowiedzi chciałbym wiedzieć, jak uzyskać dostęp zarówno do b, jak i c, jeśli przypadek jest następujący: <element class = "a"> <element class = "b"> </ element> <element class = "c" > </ element> </ element>? Poprzez $ (". A .b.c") daje zły wynik. - Ipsita Rout
@IpsitaRout $('.a .b, .a .c') powinien zrobić lewy - Mr47
W tym przykładzie byłby selektor $('.a .c.b') również działa? - DanFromGermany


Problemem, który masz, jest to, że używasz Group Selector, podczas gdy powinieneś używać a Multiples selector! Aby być bardziej szczegółowym, używasz $('.a, .b') podczas gdy powinieneś używać $('.a.b').

Aby uzyskać więcej informacji, zobacz omówienie różnych sposobów łączenia poniższych selektorów!


Selektor grupy: ","

Zaznacz wszystko <h1> elementy I wszystkie <p> elementy I wszystkie <a> elementy :

$('h1, p, a')

Selektor wielokrotności: "" (bez znaku)

Zaznacz wszystko <input> elementy type  text, z klasami code i red :

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

Selektor potomków: "" (spacja)

Zaznacz wszystko <i> elementy wewnątrz <p> elementy:

$('p i')

Child Selector: ">"

Zaznacz wszystko <ul> elementy, które są bezpośrednimi dziećmi a <li> element:

$('li > ul')

Sąsiadujący Selektor Rodzicielski: "+"

Zaznacz wszystko <a> elementy, które są umieszczane zaraz po <h2> elementy:

$('h2 + a')

Ogólny selektor rodzeństwa: "~"

Zaznacz wszystko <span> elementy będące rodzeństwem <div> elementy:

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





Rozwiązanie Vanilla JavaScript: -

document.querySelectorAll('.a.b')


23
2018-01-29 18:02





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


22
2017-12-14 16:15





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

$('div.a.b')

To będzie wyglądać tylko poprzez elementy div zamiast przejść przez wszystkie elementy HTML, które masz na swojej stronie.


16
2017-09-28 05:26