Question

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?

Answer 1

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.