4

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.

Improve this question

4 Answers 4

Reset to default
2

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

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

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.

Improve this answer

4 Comments

isn't find() also expensive. I did a performance test and it seems like the non cached version is faster. jsperf.com/testttttt
I think your test has a problem, because you are executing var $wrapper = $("wrapper") and $wrapper.find("#editable").hide() on every iteration.
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.
Well in a practical example, you would cache the reference to #wrapper before you enter any loop.
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.

Improve this answer

3 Comments

All elements are contained inside #wrapper
In my question i noted that whatever could be a class or id. Are you saying it's better to not cache.
@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.
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.

Improve this answer

1 Comment

I think that's functionally equivalent to $wrapper.find('#whatever')

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.