jquery, selektor klasy w id

91

Poniżej, w jaki sposób powinienem wybrać elementy, które zawierają klasę my_classw elemencie z id = "my_id"?

Zauważ, że element może mieć również inną klasę, której nie wybieram.

<div id = "my_id">
    <span class = "my_class hidden">hi</span>
    <span class = "my_class">hello</span>
</div>

próbował

$("#my_id [class*=my_class ]")
user984003
źródło

Odpowiedzi:

151

Możesz użyć selektora klasy razem z selektorem potomków

$("#my_id .my_class")
Arun P Johny
źródło
Czy mogę to połączyć z: first (aby uzyskać pierwszy element tej klasy wewnątrz #my_id)?
jakob.j
1
@ jakob.j$("#my_id .my_class:first")
Arun P Johny
Czy mogę użyć tego samego dla klasy niż id takiego jak $ (". My_class #my_id"), gdy id jest zdefiniowany w klasie
dhS
48

Po prostu użyj zwykłego selektora klas.

$('#my_id .my_class')

Nie ma znaczenia, czy element ma również inne klasy. Ma klasę .my_class i znajduje się gdzieś wewnątrz #my_id , więc będzie pasował do tego selektora.

Jeśli chodzi o wydajność

Zgodnie z dokumentacją dotyczącą wydajności selektora jQuery , szybsze jest użycie dwóch selektorów osobno, na przykład:

$('#my_id').find('.my_class')

Oto odpowiednia część dokumentacji:

Selektory oparte na ID

// Fast:
$( "#container div.robotarm" );

// Super-fast:
$( "#container" ).find( "div.robotarm" );

.find()Podejście jest szybsza, ponieważ pierwszy wybór jest obsługiwana bez konieczności przechodzenia przez silnik wybieraka Sizzle - pozycje ID-tylko są obsługiwane za pomocą document.getElementById(), których jest bardzo szybki, ponieważ pochodzi z przeglądarką.

Wybieranie według identyfikatora lub samej klasy (między innymi) wywołuje funkcje dostarczane przez przeglądarkę, takie jak, document.getElementById()które są dość szybkie, podczas gdy użycie selektora zstępującego wywołuje silnik Sizzle, który, chociaż szybki, jest wolniejszy niż sugerowana alternatywa.

doppelgreener
źródło
1

Myślę, że prosisz o wybranie tylko <span class = "my_class">hello</span>tego elementu, musisz to zrobić, jeśli dobrze rozumiem twoje pytanie, to jest odpowiedź,

$("#my_id [class='my_class']").addClass('test');

DEMO

Thirumalai murugan
źródło
$("#my_id .my_class")jest krótszym odpowiednikiem; w tym przypadku nic nie zyskujesz dzięki użyciu selektora atrybutów.
doppelgreener
Mam nadzieję, że to również spełniło to samo zadanie, co Twoja odpowiedź, podczas gdy odpowiadam na pytanie, na które odpowiedziałeś, nie zauważyłem, że odkąd odpowiedziałem, nie usunąłem pytania.
Thirumalai murugan
1

Równa się również $( "#container" ).find( "div.robotarm" );
:$( "div.robotarm", "#container" )

Pasha Oleynik
źródło