jQuery，如何使用多个缓存元素

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 :)

5 个解决方案

#1

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

您可以使用.add()“将元素添加到匹配元素集”:

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

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

.add()的文档:http://api.jquery.com/add

.add() can take in:

.add()可以接受:

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

和带上下文的选择器($(' ', ))

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

您还可以将一组DOM元素传递给jQuery:

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

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

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

这是一个演示: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...)

我创建了目前答案的三种不同方法的jsperf:http://jsperf.com/jquery-fadeto-once-vs-twice(似乎使用数组选择器是最快的:$([one,two] ).fadeTo ...)

#2

jQuery's add

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

#3

You can use .add() method for that;

你可以使用.add()方法;

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:

如果在命名变量时添加$前缀会很好。这样您就可以将它们与标准的javascript对象区分开来。所以这更好:

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...

如果您已经存储了选择器,则只需将fadeTo单独应用于每个选择器。无论如何,JQuery只需要解析选择器......

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

#5

Try this

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

#1