jquery, Selektor für Klasse innerhalb von id

91

Wie soll ich unten die Elemente auswählen, die die Klasse my_classinnerhalb des Elements enthalten id = "my_id"?

Beachten Sie, dass das Element möglicherweise auch eine andere Klasse hat, für die ich nicht auswähle.

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

hat versucht

$("#my_id [class*=my_class ]")
jquery user984003
quelle

Antworten:

149

Sie können den Klassenselektor zusammen mit dem Nachkommenselektor verwenden

$("#my_id .my_class")
Arun P Johny
quelle
Kann ich dies kombinieren mit: first (um das erste Element dieser Klasse in #my_id zu erhalten)?
Jakob.j
1
@ jakob.j$("#my_id .my_class:first")
Arun P Johny
Kann ich für die Klasse dasselbe als id wie $ (". My_class #my_id") verwenden, wenn id innerhalb der Klasse definiert ist
dhS
48

Verwenden Sie einfach den einfachen alten Klassenwähler.

$('#my_id .my_class')

Es spielt keine Rolle, ob das Element auch andere Klassen hat. Es hat die Klasse .my_class und befindet sich irgendwo in #my_id , sodass es mit diesem Selektor übereinstimmt.

In Bezug auf die Leistung

Laut der Leistungsdokumentation zum jQuery-Selektor ist es schneller, die beiden Selektoren wie folgt getrennt zu verwenden:

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

Hier ist der relevante Teil der Dokumentation:

ID-basierte Selektoren

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

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

Der .find()Ansatz ist schneller, da die erste Auswahl ohne Durchlaufen der Sizzle-Auswahl-Engine ausgeführt wird. Nur-ID-Auswahlen werden mit verwendet document.getElementById(), was extrem schnell ist, da sie für den Browser nativ ist.

Die Auswahl nach ID oder Klasse allein (unter anderem) ruft vom Browser bereitgestellte Funktionen auf, document.getElementById()die recht schnell sind, während die Verwendung eines absteigenden Selektors die Sizzle-Engine wie erwähnt aufruft, die zwar schnell, aber langsamer als die vorgeschlagene Alternative ist.

Doppelgrün
quelle
1

Ich denke, Sie bitten darum, nur <span class = "my_class">hello</span>dieses Element auszuwählen . Sie haben dies getan. Wenn ich Ihre Frage richtig verstehe, ist dies die Antwort.

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

DEMO

Thirumalai Murugan
quelle
$("#my_id .my_class")ist das kürzere Äquivalent; In diesem Fall erhalten Sie nichts, wenn Sie die Attributauswahl verwenden.
Doppelgreener
Ich hoffe, dass dies auch den gleichen Job gemacht hat wie Ihre Antwort. Während ich die von Ihnen beantwortete Frage beantworte, habe ich nicht bemerkt, dass ich die Frage seit der Beantwortung nicht gelöscht habe.
Thirumalai Murugan
1

Auch $( "#container" ).find( "div.robotarm" );
ist gleich:$( "div.robotarm", "#container" )

Pascha Oleynik
quelle