Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

css selectors vs jquery traversal

With jquery there seem to be two ways of finding a list item within an unordered list within the DOM.

$("ul>li");

and

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

Is there a reason why the latter might be more preferable? It seems like one would need more code to get the same result.

like image 301
cantdutchthis Avatar asked Apr 30 '13 20:04

cantdutchthis


1 Answers

Yup. Speed. .find() will win every time. And speed of processing is tantamount!

jsPerf speed test to show what I mean

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

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

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

updated jsPerf to include .children()

like image 59
PlantTheIdea Avatar answered Sep 20 '22 00:09

PlantTheIdea