li"); an...">
Geek Answers Handbook

CSS and jquery traversal selectors

With jquery, there seem to be two ways to find a list item in an unordered list in the DOM.

$("ul>li");

and

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

Is there a reason the latter may be preferable? It seems like more code is needed to get the same result.

+8
jquery css jquery-selectors
source share
2 answers

Yeah. Speed. .find() wins every time. And the processing speed is equivalent!

jsPerf speed test to show what i mean

Although .find() will get everything that is subordinate (children, children of children, children of children of children, etc.), and > is a direct child selector. Its best to use apples for apples to compare one of the following:

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

Although if you do .find('li') , it will be the fastest way to do this, even faster than .children('li') .

updated jsPerf to include .children()

+11
source share

1) they do not match, the second form will be equivalent to $("ul li"); , and the first is equivalent to $("ul").children("li")

2) If you use the second form, you simplify the jQuery parsing task. But this makes your code less simple, so I would not recommend it if you had not proved that speed is very important in your case. However, you usually have more code, such as caching certain elements or some other relocation functions that justify the use of find .

0
source share

More articles:


All Articles