JQuery Selectors: Wie wähle ich ein Element mit einer bestimmten Klasse * und * ID

Question

Ich versuche, ein HTML-Element auf meiner Seite, die eine bestimmte Klasse und ID hat. Hier ist der tag:

<div class="statusLight" id="green"></div> 

Ich habe versucht, dies ohne Glück:

$statusLight = $('.statusLight#green'); 

Ich weiß, dass ich einfach

$statusLight = $('#green'); 

sagen könnte, aber ich versuche, einen Weg zu finden, um es auszuwählen basierend auf seiner Klasse. Jede Hilfe wäre willkommen.

Answer 1

Sowohl #green.statusLight als auch .statusLight#green sind gültige Selektoren und sollten das Element auswählen, nach dem Sie suchen. Der Erste wird jedoch schneller sein.

Verwenden Sie $(...), nachdem Ihr Dokument geladen wurde, d. H. Von $(document).ready(function() { ... }) oder indem Sie Ihr Skript nach Ihrem Element platzieren?

Answer 2

Ich bin nicht ganz sicher, warum Sie das tun möchten.

Eine ID sollte eindeutig sein. Wenn Sie sie auswählen, ist keine weitere Spezialisierung erforderlich. Wenn nicht, müssen Sie Ihren HTML-Code ändern, um ihn zu ändern.

Dieses Szenario wäre nur sinnvoll, wenn Sie einen Klassenselektor mit einem Elementselektor kombinieren, z.

$("div.statuslight") 

Aber in Ihrem Beispiel gibt es keinen Sinn, da Sie sowieso eine ID haben!

Answer 3

Warum sollten Sie auch in der Klasse auswählen? IDs sollten eindeutig sein. Wenn Sie also die Klasse hinzufügen, würden Sie nichts kaufen. Wenn Sie nur ID verwenden, ist es effizienter, denn dann kann jQuery einfach die native getElementByID verwenden, die immer die schnellste ist. Halten Sie Ihre Abfragen so einfach wie möglich.

Answer 4

Ein anderer Grund, dass Sie wahrscheinlich dies tun würden, ist, wenn Sie generischen Code zwischengespeichert haben, der nach einer bestimmten ID sucht, aber Sie möchten nur aktivieren, wenn Sie einen bestimmten Stil zugewiesen haben. Insbesondere beim Rendern von skalierten MVC-Elementen, bei denen IDs in bestimmten Ansichten vorhanden sind, aber keine Aktion ausgeführt werden soll, sagen wir ... "versteckte" ID-Felder, aber in anderen Ansichten können dies Lookup-Werte in einem Combo sein ein AddIn Select2 zugewiesen ...

Answer 5

der einfachste Weg ist:

$('.statusLight[id=green]');

Da die ID ein Attribut ist, können Sie das Attribut Selektor

Answer 6

$(".class#id") oder $("#id.class") wird verwenden beide arbeiten.

Alle Kommentare in dieser Frage ist, dass es keinen Grund gibt, dies zu tun ... es gibt möglicherweise keinen "Best Practices" Grund, dies mit einem gut gestalteten Programm zu tun, aber in der realen Welt arbeiten die meisten von uns Unternehmen, die Codebasen haben, die nicht sehr gut organisiert sind, und wenn Sie an einem großen 10000+ Dateiprogramm arbeiten, möchten Sie vielleicht keine nicht beschreibende ID ersetzen und indem Sie dem Selektor eine Klasse hinzufügen, können Sie Ihren Mitschreibern helfen, dies zu verstehen wo die ID herkam.

Typischer Fall, ich an einem Projekt arbeiten, wo wir Container DIVs haben, die „Widgets“ auf der Seite ... diese „Widgets“ sind eine numerische ID aus der Datenbank gegeben, so dass wir am Ende des mit <div id="12345" class="widget">

erstellen

Jemand anders hat die mehrdeutige ID lange bevor ich hier arbeitete codiert ... aber es bleibt. Wenn ich JQuery schreibe, würde ich es vorziehen, nicht mehr eine verwirrende Unordnung des Codes zu machen ... so könnte ich anstelle von $("#12345")$(".widget#12345") bevorzugen, so dass jemand keine halbe Stunde verbringen muss, um herauszufinden, dass die 12345 id in diesem Szenario ist für ein Widget.

Also während $("#12345") und $(".widget#12345") wählen Sie das gleiche ... es macht den Code viel lesbarer für meine Mitarbeiter und das ist wichtiger als ein Bruchteil einer Sekunde in der Geschwindigkeit Verbesserung für das Javascript.

Answer 7

Nur eine Follow-up-Info:

Wenn Sie suchen eine ID und Unterklasse (zB die grüne Statuslight, aber nicht die blau) verweisen:

<div id="green"> 
    <div class="statusLight"></div> 
</div> 

<div id="blue"> 
    <div class="statusLight"></div> 
</div> 

Dann müssen Sie hinzufügen ein Leerzeichen $("#green .statusLight")