jQuery $('#submitForm').find('form') vs jQuery $('#submitForm form')

Question

I was wondering which of both methods is faster:

Selecting the container and the form itself at in one statement:

jQuery $('#submitForm form')

or using jQuery's .find() selector:

jQuery $('#submitForm').find('form')

Pretty sure the 2nd one but you could set up a benchmark on jsperf.com — Olson.dev, Aug 19 '15 at 14:50
possible duplicate of [jQuery single selector vs .find()](http://stackoverflow.com/questions/6230266/jquery-single-selector-vs-find) — durron597, Aug 19 '15 at 14:51

score 3 · Accepted Answer · answered Aug 19 '15 at 14:50

3

The .find() approach is faster because the first selection is handled without going through the Sizzle selector engine – ID-only selections are handled using document.getElementById(), which is extremely fast because it is native to the browser.

So

jQuery $('#submitForm').find('form')

Is Faster than

jQuery $('#submitForm form')

Selector optimization is less important than it used to be, as more browsers implement document.querySelectorAll() and the burden of selection shifts from jQuery to the browser.

answered Aug 19 '15 at 14:50

Dhaval Marthak

17,246
6
46
68

Well for me it looks like .find is faster (even many others say it's slower). It's always about 20% faster than the single selector – Ivan Sieder Aug 19 '15 at 15:27
Filtering by traversing it takes a bit more code, but it’s faster. – Raju Padhara Aug 19 '15 at 15:31
I would only say _Be specific on the right-hand side of your selector, and less specific on the left._ :) – Dhaval Marthak Aug 19 '15 at 15:33

jQuery $('#submitForm').find('form') vs jQuery $('#submitForm form')

1 Answers1