CODEWITHSUNDEEP
javascriptjquery
anthonypliu
anthonypliu

Reputation: 12437

Declaring a var instead of using .find multiple times?

I have been reading on best practices and I have come across this one:

Dont do this:

$("#element .child").hide()

Do this:

$("#element").find('.child').hide()

Now my question is what if i want to hide/show the .child element multiple times, should I declare it like this:

var spinner = $("#element").find('.child');
spinner.hide();

or do I just keep calling $("#element").find('.child').hide()

Upvotes: 1

Views: 103

Answers (4)

stlvc
stlvc

Reputation: 823

Yes, you should always try to keep your selections low, which means that you should save every element selection in a variable that you need more then once.

Try to avoid single DOM operations, also. Let me provide an example:

jQuery('#test').addClass('hide');
jQuery('#check').addClass('hide');

This will add the class "hide" to elements with the id "#test" or "#check". You can apply many jQuery functions like .addClass on element collections also, which will reduce overhead (instead for example iterating over an array / collection with jQuery.each()).

// Select both ids within one query
jQuery('#test, #check').addClass('hide');

This can lead to a huge performance boost if you are really working with the DOM, like adding options to a select box. I've put up a little benchmark on jsfiddle: http://jsfiddle.net/rrgNZ/2/

Upvotes: 0

Jorge
Jorge

Reputation: 18257

That's entirely depending of your problem, if you need to use the same element for multiples purposes in different function, the best options will be to save it into a variable, never the less if you only need once work with chaining of events

Upvotes: 0

Bergi
Bergi

Reputation: 664936

Yes, create the spinner variable. That way the jQuery constructor/function won't be executed each time, you can reuse the once created objects. The memory overhead is negligible.

Upvotes: 2

Adam Rackis
Adam Rackis

Reputation: 83366

Should I declare it like this:

var spinner = $("#element").find('.child');
spinner.hide();

Yes. You should do exactly that since it will obviate the need for multiple dom queries.

One common best practice though, so you can easily keep track of which variables are jQuery objects and which are not, is to prefix your variable with $

var $spinner = $("#element").find('.child');
$spinner.hide();

Upvotes: 4

Related Questions