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

Question

我在项目中使用缓存选择器以加快速度，同时看到了一些改进： （减少在文档内搜索的次数）

For my project, I use cached selectors to improve performance by reducing the number of searches performed within the document.

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

在这种情况下，我该如何使用缓存的选择器？例如：

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

这只是为了完善我的代码。

Ty :)

- a clever name

---

参见 https://dev59.com/53I-5IYBdhLWcg3wYnSQ 可能的解决方案。 - Blazemonger

Answer 1

您可以使用.add()方法将元素添加到匹配元素集中：

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

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

.add() 可以接收以下参数：

• 选择器
• DOM 元素
• jQuery 对象
• 带有上下文的选择器 ($('<selector>', <context>))

你也可以将 DOM 元素数组传递给 jQuery:

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

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

这里是一个演示：http://jsfiddle.net/3xJzE/

更新

我创建了一个 jsperf，包含当前回答中的三种不同方法：http://jsperf.com/jquery-fadeto-once-vs-twice （似乎使用数组选择器最快： $([one, two]).fadeTo...）

- Jasper

Answer 2

你可以使用.add()方法来实现；

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

在命名变量时，如果加上$前缀，会更好。这样你就可以将其与标准javascript对象区分开来。因此，以下方式更佳：

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

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

- Emre Erkan

Answer 3

jQuery的add

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

- Dennis

Answer 4

如果您已经存储了选择器，只需将fadeTo应用于每个选择器即可。JQuery无论如何都必须解析选择器...

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

- musefan

---

@user690214：我无法想象在多个元素上调用一次fadeTo会更好。它仍然必须为每个元素做两次淡入/淡出 - 在某个地方沿着这条线。 - musefan

@user690214 这里有一个 jsperf，展示了使用一个 fadeTo 和使用两个 fadeTo 之间的性能差异。同时也测试了使用一个 DOM 元素数组作为选择器：http://jsperf.com/jquery-fadeto-once-vs-twice （似乎数组选择器是最快的： $([sel1[0], sel2[0]]).fadeTo...） - Jasper

Answer 5

试试这个

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

- ShankarSangoli