jQuery, how to use multiple cached elements

问题

For my project I'm using cached selectors to speed up, and see improvements: (to reduce searches inside the document)

var sel1 = $('#selector1');
var sel2 = $('#selector2');

how can I use cached selectors in this situation? for ex:

$('#selector1, #selector2').fadeTo(300, 1, 'linear');

It's just to polish up my code

Ty :)

回答1:

You can use .add() to "Add elements to the set of matched elements":

sel1.add(sel2).fadeTo(300, 1, 'linear');

Docs for .add(): http://api.jquery.com/add

.add() can take in:

• a selector
• DOM elements
• jQuery objects
• and selectors with context ($('<selector>', <context>))

You can also pass an array of DOM elements to jQuery:

var one = $('#one')[0],
    two = $('#two')[0];

$([one, two]).fadeTo(300, 1, 'linear');

Here is a demo: http://jsfiddle.net/3xJzE/

UPDATE

I created a jsperf of the three different methods that are currently answers: http://jsperf.com/jquery-fadeto-once-vs-twice (it seems like using an array selector is the fastest: $([one, two]).fadeTo...)

回答2:

jQuery's add

sel1.add(sel2).fadeTo(300, 1, 'linear');

回答3:

You can use .add() method for that;

sel1.add(sel2).fadeTo(300, 1, 'linear');

It'll be good if you add $ prefix when naming your variables. This way you can distinguish them from standart javascript objects. So this is better:

var $sel1 = $('#selector1');
var $sel2 = $('#selector2');

$sel1.add($sel2).fadeTo(300, 1, 'linear');

回答4:

If you already have the selectors stored just apply the fadeTo to each one individually. JQuery will just have to parse the selector anyway...

sel1.fadeTo(300, 1, 'linear');
sel2.fadeTo(300, 1, 'linear');

回答5:

Try this

sel1.add(sel2).fadeTo(300, 1, 'linear');

来源：https://stackoverflow.com/questions/8526226/jquery-how-to-use-multiple-cached-elements