jQuery caching selectors

Question

I have div with id #wrapper and all element are inside it. I'm caching wrapper by doing

var $wrapper = $('#wrapper');

Now any time i want to make a selector or reference an element, i do

$wrapper.find('#whatever').click(....

By doing this i avoid wrapping with jQuery object again, so any selector i do in the future will be based on the cached $wrapper. But on the other when i use find() with the cached $wrapper, i know it will search all elements inside #wrapper. My questions is whic is better better, use cached variable along with find then issue click event, or just simply do $('#whatever').click(..

whatever can be either a class or id.

score 2 · Answer 1 · edited Nov 22 '12 at 09:14

2

What about $('selector', context) so ...

$('#whatever', $wrapper)

searches the DOM only in the context of $wrapper

Don't search the whole tree when you can search a single branch or twig.

edited Nov 22 '12 at 09:14

kleopatra

51,061
28
99
211

answered Nov 22 '12 at 09:11

Willabee

31
1

1

I think that's functionally equivalent to `$wrapper.find('#whatever')` – vol7ron Mar 19 '13 at 19:02

score 2 · Answer 2 · answered May 01 '11 at 01:56

2

Performance wise it is better to cache the "wrapped" version of the DOM element. Otherwise you'll be traversing the DOM every time you do $("#myElem") which can get very expensive if your DOM is really big or you are doing it a lot of times.

answered May 01 '11 at 01:56

CarlosZ

8,281
1
21
16

isn't find() also expensive. I did a performance test and it seems like the non cached version is faster. http://jsperf.com/testttttt – Pinkie May 01 '11 at 01:57
I think your test has a problem, because you are executing `var $wrapper = $("wrapper")` and `$wrapper.find("#editable").hide()` on every iteration. – CarlosZ May 01 '11 at 02:03
That's exactly my question. Is find not a good thing to use with cached variable since it will reference all element with the specified id or class. – Pinkie May 01 '11 at 02:07
Well in a practical example, you would cache the reference to `#wrapper` before you enter any loop. – CarlosZ May 01 '11 at 02:13

user229044 · Answer 3 · 2011-05-01T02:03:33.647

2

The two are not completely equivalent. Your caching version is actually the same as $("#wrapper #whatever"), and won't match the element with id whatever if it isn't contained in the wrapper div.

If you always intend for the #whatever element to be within the #wrapper, then $('#whatever') is actually probably faster than your cached version - finding elements by ID involves a single function call, getElementById, which is available in all browsers, while your cached version involves checking the hierarchy to make sure the matched #whatever element descends from #wrapper.

edited May 01 '11 at 02:03

answered May 01 '11 at 01:56

user229044

232,980
40
330
338

All elements are contained inside #wrapper – Pinkie May 01 '11 at 01:59
In my question i noted that whatever could be a class or id. Are you saying it's better to not cache. – Pinkie May 01 '11 at 02:00
@Pinkie It is better not to cache when dealing with ids. With classes, it will be faster to use your caching approach. The best thing to do would be to test this yourself. It's extremely trivial to try both versions and measure their relative performance. – user229044 May 01 '11 at 02:02

score 2 · Accepted Answer · answered May 01 '11 at 02:02

if you use it where whateverID is an ID then $('#whateverID').click(.. would give you slightly better performance, however if whateverCLASS is class or anything other than ID, $wrapper.find('whateverCLASS').click(.... will be better since the traversing will be limited to specific container which is subset of the whole DOM

jQuery caching selectors

4 Answers4

Linked