jQuery object: to cache or not to cache?

Question

I have some trouble that comes from my Javascript (JS) codes, since I sometimes need to access the same DOM elements more than once in the same function. Some reasoning is a

Answer 1

I almost always prefer to cache the jQuery object but the benefit varies greatly based on exactly what you are using for your selector. If you are using ids then the benefit is far less than if you are using types of selectors. Also, not all selectors are created equally so try to keep that in mind when you write your selectors.

For example: $('table tr td') is a very poor selector. Try to use context or .find() and it will make a BIG difference.

One thing I like to do is place timers in my code to see just how efficient it is.

var timer = new Date(); 
// code here
console.log('time to complete: ' + (new Date() - timer));

Most cached objects will be performed in less than 2 milliseconds where as brand new selectors take quite a bit longer because you first have to find the element, and then perform the operation.