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

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

12

Verwenden Sie immer

//Super Fast
$('#my_id').find('.my_class');

anstatt

// Fast:
$('#my_id .my_class');

Schauen Sie sich die JQuery-Leistungsregeln an .

Auch bei Jquery Doc

— Niks Jain
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