I can imagine the correct answer to this based on theory, but I'm just looking for some confirmation. I'm wondering what the most efficient way to re-use a jQuery-selected element is. For example:

$('#my_div').css('background','red');
//some other code
$('#my_div').attr('name','Red Div');

vs.

myDiv = $('#my_div');
myDiv.css('background','red');
//some other code
myDiv.attr('name','Red Div');

I assume the second example is more efficient because the element #my_div doesn't have to get found more than once. Is that correct?

Similarly, is it more efficient to first save $(this) in a varaible, such as 'obj', and then reuse 'obj' rather than using $(this) over and over? In this case, jQuery isn't being forced to find an element over and over again, but it IS being forced to convert this to a jQuery object [$(this)]. So as a general rule of thumb, should a jQuery object ALWAYS be stored in a variable if it will be used more than once?

I can imagine the correct answer to this based on theory, but I'm just looking for some confirmation. I'm wondering what the most efficient way to re-use a jQuery-selected element is. For example:

$('#my_div').css('background','red');
//some other code
$('#my_div').attr('name','Red Div');

vs.

myDiv = $('#my_div');
myDiv.css('background','red');
//some other code
myDiv.attr('name','Red Div');

I assume the second example is more efficient because the element #my_div doesn't have to get found more than once. Is that correct?

Similarly, is it more efficient to first save $(this) in a varaible, such as 'obj', and then reuse 'obj' rather than using $(this) over and over? In this case, jQuery isn't being forced to find an element over and over again, but it IS being forced to convert this to a jQuery object [$(this)]. So as a general rule of thumb, should a jQuery object ALWAYS be stored in a variable if it will be used more than once?

• javascript
• jquery
• css-selectors

• 2 Yes. Don't forget to use var though. – kapa Commented Mar 28, 2011 at 16:07
• 2 I also like to start the variable name with a $ sign to indicate it is a jQuery object. So rather than myDiv, I would use $myDiv. – John McCollum Commented Mar 28, 2011 at 16:09
• possible duplicate: stackoverflow.com/questions/4654558/… – amosrivera Commented Mar 28, 2011 at 16:22
• Yes, the first part is indeed a duplicate of the question you linked to. Sorry about that. However, my related question about $(this) doesn't get covered in that other post. – maxedison Commented Mar 30, 2011 at 12:50

4 Answers 4

You should write your code such that you limit the number of DOM traversals.

When you write something like this:

$('#my_div').css('background','red');
//some other code
$('#my_div').attr('name','Red Div');

You are finding #my_div twice, which is inefficient.

You can improve this either by assigning the result of a selector (i.e. var x = $('.something')) and manipulate the variable x, or you can chain your method calls like this:

$('#my_div').css('background','red').attr('name','Red Div');

You'll see the above code used a lot, because you're finding the element once. The css() method will apply a CSS style and return the actual result of $('#my_div'), so you can invoke another method, in this case attr().

My preferred way of handling the re-use of selectors is to store them as a variable, and wrap my stuff in a closure.

if you're using jQuery selector (like $('#element')), then yes, you should always store your results.

if you're using object and wrapping it in jQuery (like $(this)), it's not necessary, because jQuery doesn't need to search for that element again.

One thing that I find is generally overlooked is just how powerful jQuery chains are. It may not be so noticeable, but since jQuery caches your wrapped elements within a chain, you can modify elements, go into a more specific subset, modify, then go back up into a a general superset without much overhead.

I expect something like (pardon the example)

$('#myDiv')
    .addClass('processing')
    .find('#myInput')
    .hide('slow')
    .end()
    .removeClass('processing')
    ;

to be better performance-wise than even

var $myDiv = $('#myDiv').addClass('processing');
var $myInput = $('#myDiv #myInput').hide('slow');
    $myDiv.removeClass('processing');

This also holds for applying the jQuery function to elements returned in an event handler. Try to avoid applying $(...) too many times, because this is slow. Instead create a variable that contains the result of $(...). Good practice is to start the variable with a $, which gives a hint about the jQuery object inside the variable.

$('a').click(function(){
  var $this = $(this);
  $this.addClass("clicked");
  $this.attr("clicked", true);
});