Always use jquery selectors or cache them in variables?

Question

The jQuery selectors are great, but sometimes I find that I am typing them again and again, and this is a little annoying.

$('#mybutton').click(function() { $('#message-box').doSomething(); $('#message-box').doSomethingElse(); $('#message-box').attr('something', 'something'); }); 

So often, I like to cache my objects in variables:

 $('#mybutton').click(function() { var msg = $('#message-box'); msg.doSomething(); msg.doSomethingElse(); // you get the idea }); 

Are there any pros or cons between these two patterns? Sometimes it seems that creating variables is an extra job, but sometimes it allows me to type a lot of fingers. Are there any memory issues you need to know about? After the selectors clear well after use, whereas my bad coding habits tend to keep the vars in memory longer?

It doesn't hold me back at night, but I'm curious. Thanks.

EDIT: see this question . It essentially sets the same thing, but I like the answer better.

Answer 1

You must link them:

 $('#mybutton').click(function() { $('#message-box').doSomething().doSomethingElse().attr('something', 'something'); }); 

If you need to do something over and over again, and the functions do not return a jQuery object, saving them to var faster.

Answer 2

I usually associate them according to Pims's answer, however sometimes, when many operations need to be performed, the chain can cause readability problems. In these cases, I cache the selected jQuery objects in a variable.

Answer 3

I say, follow him!

I do the same as you.

It makes my code more readable, which makes me happy.

Answer 4

Actually the question is much more complicated.

• Chains are not always possible, because selector strings or cached instances of the jQuery selector can be stored in the new properties of the function (), accessed by various prototype functions, rather than one part of the code.

• You can include both selector strings and cached jQuery selectors. I believe that using selector strings as the 'this' properties should result in a slower but smaller amount of RAM code consumed, while using cached selectors should lead to even faster RAM consumption. I'm right?

I am going to change quite a few new properties of function () from selector strings in cache selectors, so I ask.

Answer 5

Pim Jager is 100% right for this particular situation, but it can be useful to indicate that there are situations where caching is more appropriate.

First, every time you call $ ("something"), you re-create an instance of the whole jQuery object, so you chain or cache it whenever you intend to perform more than one action on the jQuery object.

If all you are going to do in the close is an action on the object, the chain is your friend, and the Pim Jager code is in place. But if you are going to evaluate a part of this object, you will not be able to link these actions and caching, as the second block of code of the second poster shows, this is actually the way to go. For example:

 $('#mybutton').click(function() { var msg = $('#message-box'); msg.doSomething(); if (msg.hasClass('.something')) { msg.dosomethingElse(); } }); 

Interesting resource: http://jsperf.com/jquery-chaining-vs-caching