2013-04-30 7 views
8

Mit jquery scheint es zwei Möglichkeiten zu geben, ein Listenelement innerhalb einer ungeordneten Liste innerhalb des DOM zu finden.css selectors vs jquery traversal

$("ul>li"); 

und

$("ul").find("li"); 

Gibt es einen Grund, warum die letztere vorzuziehen sein könnte? Es scheint, als würde man mehr Code benötigen, um dasselbe Ergebnis zu erhalten.

+1

'find' wählt alle passenden untergeordneten Elemente,'> 'ist ein direkter Kindselektor. Dies zeigt, dass Sie die jQuery-Dokumentation nicht gelesen haben. – undefined

+0

Sie liegen falsch. '$ (" ul> li ")' findet nur das erste 'li' für jedes' ul', wobei '$ (" ul "). find (" li ")' findet alle 'li' in jedem' ul' . Du meinst im ersten Fall: '$ (" ul li ")' richtig? – WooCaSh

+0

* Es kommt darauf an *. In den meisten Fällen ist es sinnvoll, zu entscheiden, welche Version auf der Grundlage der Performance verwendet wird. Daher ist es in den meisten Fällen sinnvoller, eine Version zu wählen, die besser wartbar und/oder einfach zu lesen ist als sich darüber Gedanken zu machen schneller. –

Antwort

11

Yup. Geschwindigkeit. .find() wird jedes Mal gewinnen. Und die Geschwindigkeit der Verarbeitung ist gleichbedeutend!

jsPerf speed test to show what I mean

Obwohl .find() wird alles erhalten, die ein untergeordnet ist (Kinder, Kinder Kinder, Kinder der Kinder der Kinder, usw.) und > ist ein direkter Kindselektor. Es ist eine bessere Äpfel mit Äpfel eine der folgenden Bedingungen zu vergleichen:

  • $('ul li') vs $('ul').find('li')
  • $('ul > li') vs $('ul').children('li')

Obwohl, wenn Sie .find('li') tun werde es noch der schnellste Weg sein Mach es, noch schneller als .children('li').

updated jsPerf to include .children()

0

1) sie sind nicht das gleiche, würde die zweite Form zu $("ul li"); gleichwertig sein und die erste ist äquivalent zu $("ul").children("li")

2) Wenn Sie das zweite Formular verwenden, Sie jQuery Parsen Aufgabe vereinfachen. Aber es macht Ihren Code weniger einfach, also würde ich es nicht empfehlen, es sei denn, Sie haben bewiesen, dass die Geschwindigkeit in Ihrem Fall sehr relevant ist. Das heißt, Sie haben normalerweise mehr Code mit zum Beispiel einige Element-Caching oder einige andere traversierende Funktionen, die die Verwendung von find rechtfertigen.