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

【问题标题】：jQuery, how to use multiple cached elementsjQuery，如何使用多个缓存元素
【发布时间】：2011-12-15 20:34:31
【问题描述】：

对于我的项目，我使用缓存选择器来加快速度，并看到改进：（减少文档内的搜索）

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

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

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

只是为了完善我的代码

泰:)

【问题讨论】：

【解决方案1】：

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

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

.add()可以收：

您还可以将 DOM 元素数组传递给 jQuery：

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

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

更新

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

【讨论】：

【解决方案2】：

jQuery 的add

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

【讨论】：

【解决方案3】：

您可以为此使用.add() 方法；

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

如果在命名变量时添加$ 前缀会很好。通过这种方式，您可以将它们与标准 javascript 对象区分开来。所以这样更好：

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

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

【讨论】：

【解决方案4】：

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

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

【讨论】：

@user690214：我无法想象一个 fadeTo 调用多个元素会更好。它仍然需要进行两次淡入淡出 - 每个元素一次 - 沿线某处
@user690214 这是一个 jsperf，用于显示使用一个 fadeTo 和使用其中两个之间的性能差异。还测试了使用 DOM 元素数组作为选择器：jsperf.com/jquery-fadeto-once-vs-twice（似乎数组选择器是最快的：$([sel1[0], sel2[0]]).fadeTo...）

【解决方案5】：

试试这个

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

【讨论】：