2009-08-19 9 views
2

Ein paar Fragen eigentlichWelcher dieser Selektoren ist wahrscheinlich schneller?

Da die beiden folgenden das gleiche Ergebnis

$("#MyTable tr"); 
$("tr", "#MyTable"); 

gesetzt zurück gibt es einen Unterschied in der Leistung der Eltern-Kind-CSS-Selektor Konvention oder die Angabe eines Zusammenhang zwischen der Verwendung von der Selektor stattdessen?

Auch, da ich garantieren kann, dass ein tr wird ein unmittelbares Kind eines Tisches sein, würde dies auf die Leistung der oben genannten verbessern?

$("#MyTable>tr") 
+4

„gegeben, dass ich ein tr garantieren kann, wird sofort ein Kind einer Tabelle sein“ sein sollte - wetten Sie nicht darauf. Browser sollten (außer im XHTML-Modus) ein tbody-Element zwischen Tabellen und Tabellenzeilen implizieren. – Quentin

+0

@ David Dorward - Fairer Kommentar. Wenn wir diese Grundannahmen nicht machen können, macht das nicht diesen Selektor und die Funktion .children() überflüssig? –

+0

Nein. Es bedeutet nur, dass Sie im Umgang mit Elementen mit impliziten Start-Tags vorsichtig sein müssen. Die einzige, die routinemäßig das Start-Tag nicht enthält, ist tbody, sei nur explizit darüber, dass es da ist und du kannst aufhören, dir Sorgen zu machen. – Quentin

Antwort

3

$("#MyTable > tr") nicht wirklich arbeiten können, wie Sie entweder Thead/tfoot oder tbody als die direkte Kind haben sollte des Tisches. Ich denke, ff/Chrom usw. werden in den tbody fügen Sie damit die Wähler

$("#MyTable > tbody > tr") 
+0

habe die Kommentare zum Q nicht gesehen .... aber hier zur Klarstellung – redsquare

+0

+1 - ich habe gerade in FF getestet und du hast Recht. – karim79

1

Bei weitem die schnellste dieser drei ist:

$("#MyTable > tr") 

wie Sie ein direkter Nachkomme eines Elements Referenz durch eine id Auswahl, so dass die Auswahl recht direkt.

EDIT: @redsquare hat darauf hingewiesen, dass das oben genannte nicht in Firefox und Chrome funktioniert, da diese Browser ein tbody-Element an Tabellen anhängen werden.

Kontext-Selektoren werden grundsätzlich in ‚Funde‘ umgewandelt, so dass der langsamste der ersten beiden ist:

$("tr", "#MyTable"); 

wie es in so etwas wie dies umgesetzt wird vor nimmt jede Selektion:

$('#MyTable').find('tr'); 

Natürlich wäre es wahrscheinlich von großem Nutzen für Sie, diese selbst zu benchmarken.

Hier sind einige relevante Fragen vorher auf SO gestellt:

Verwandte Themen