Tipps zu verweisen DOM-Elemente arbeiten mit jQuery

Question

Eine Frage auf, wie Elemente mit jQuery (DOM / Verfahrgeschwindigkeit / Selectors) verweisen. Manchmal ist es einfach genug, um eine ID an das gewünschte Element zu setzen und dies zu tun:

$('#elementID').hide();

Aber manchmal nur kann es nicht verwendet werden, wenn beispielsweise mit einer Liste von n Elementen arbeiten, habe ich einige Leute anhängen gesehen, eine Klasse zu jedem Element der Liste wie:

<a class="selectMe" href="http://jquery.com/">jQuery1</a>
<a class="selectMe" href="http://jquery.com/">jQuery2</a>
<a class="selectMe" href="http://jquery.com/">jQuery2</a>

Und dann tut dies mit jQuery:

$('.selectMe').hide();

Einige andere tun das gleiche, aber mit rel-Attribut und so weiter ..

Einige andere Menschen tun dies so allgemein gehalten, dass beängstigend ist, wenn dies das Szenario:

<div id="MyID">
<span>Some Text Here</span><a href="http://jquery.com/">jQuery1</a>
</div>

Wenn ich ein Ereignis an den Anker befestigen:

$('#MyID a').show();

Wie unter der Annahme, dass es nur 1 Link innerhalb dieser DIV sein wird.

Was euch denken, dass es wirklich ganz auf das Szenario hängt oder es gibt einige gute Praktiken, dies zu tun.

Answer 1

Geben Sie für die schnellsten Konstrukte. ID ist am schnellsten. Holen Sie sich den kleinsten Kontext schnell - Sie können sogar eine ID auf einem DIV verwenden, dann von dort aus wählen -. Vermeiden vollständigen DOM suchen, wenn möglich

Zum Beispiel wird es schneller sein, auf einem Elemente mit einer Klasse suchen als nur eine Klasse.

Ein Teil davon ist nicht intuitiv. Schauen Sie sich einige der Beispiele in Stackoverflow für ein Gefühl dafür zu bekommen, was funktioniert.

Zum Beispiel:

<div id='mydiv'>
<a class="selectMe" href="http://jquery.com/">jQuery1</a>
<a class="selectMe" href="http://jquery.com/">jQuery2</a>
<a class="selectMe" href="http://jquery.com/">jQuery2</a>
</div>

Sie dann die Auswahl: (Herausgegeben pro Note)

$('#mydiv').children('a.selectMe').hide();

Diese sucht dann nur in diesem Kontext für die Links.

Bearbeiten pro Anmerkungen:

Es gibt einige Einstellungen für die Auswahl Syntax wie:

 $('#mydiv').children('a.selectMe').hide();
 $('#mydiv > a.selectMe').hide();

Einige Untersuchungen meinerseits als Dokumentation für jQuery benötigt wird, ist ein bisschen hier zweideutig: " Eltern> Kind Kosten: Array Spiele alle untergeordneten Elemente von „Kind“ von Elementen angegeben durch „Eltern“ angegeben. " und " Kinder (expr) Returns: jQuery Holen Sie sich eine Reihe von Elementen alle eindeutigen unmittelbaren Kinder von jedem der aufeinander abgestimmten Satz von Elementen enthält. „

Die Frage, die in meinem Kopf geklärt werden muss, ist, ob die erste Form zurückkehrt zeigt alle Kinder / Enkelkinder oder einfach nur die unmittelbaren Kinder als die zweite Form ist wahr. Eine davon ist die „Selektor“ Form und die andere unter „durchqueren“, die ähnlichen funktionellen Aufgaben sind für mich aber nicht genau das gleiche.

Answer 2

Ich würde sagen, es hängt von der Situation, aber ich mag Mark Schultheiss sagte, es hilft zu verstehen, wie jQuery Ihre Wähler führt die Elemente zu erhalten.

Auswahl von Klassennamen ohne Angabe von Kontext in IE zu langsam sein wird, da es nicht getElementsByClassName unterstützt. Lesen Sie diesen Artikel http://ejohn.org/blog/getelementsbyclassname-speed-comparison/. Es hilft, mit dem Elementnamen (wie div.className) oder Einschränkung der Suche auf einen kleineren Umfang wie diese voranstellen - $('.class', '#myDiv')

Das Gleiche gilt mit Attributselektoren. rel Attribut Missbrauch ist schlimmer als class Missbrauch zuschreiben, da es keine native Suche-by-Attribute Funktion in einem beliebigen Browser ist.