是否可以在jQuery中使用多个变量而不是选择器

Question

我知道执行以下操作会更快:

var $header = $("#header");
$header.css({color:"#ff0000"});
$header.find("a").addClass("foo");

代替:

$("#header").css({color:"#ff0000"});
$("#header a").addClass("foo");

因为jQuery不需要在DOM中再次找到元素,因为我们直接引用它们.

让我们说我有这个:

var $header_elements = $("#header li");
var $footer_elements = $("#footer li");

我单独使用它们进行一些jQuery操作.但是,我需要在两者上做点什么.使用选择器,我会这样做:

$("#header li, #footer li").css({color:"#ff0000"});

但是,需要再次解析DOM才能找到匹配的元素.有没有办法使用我以前声明的变量而不是新的选择器？像下面的内容(这是不工作的,我知道,这是给什么我正在寻找一个想法):

$($header_elements + $footer_elements).css({color:"#ff0000"});

我认为选择器返回某种数组或对象.我正在寻找的是一种合并它们的方法.任何人都知道这是否可行以及如何做到这一点？

谢谢你的帮助!

Answer 1

只需使用add方法:

$header_elements.add($footer_elements).css({color:'#ff0000'});

给定一个表示一组DOM元素的jQuery对象,.add()方法从这些元素的并集和传递给方法的元素构造一个新的jQuery对象..add()的参数几乎可以是$()接受的任何内容,包括jQuery选择器表达式,对DOM元素的引用或HTML片段.

Answer 2

我发布这个解决方案后几分钟就找到了解决方案.对于那些想知道的人,这里是:

$.merge($header_elements, $footer_elements).css({color:"#ff0000"});

它更快吗？我还不知道,我需要运行一些测试才能找到答案.

编辑:

我与JS小提琴测试在这里:http://jsfiddle.net/bgLfz/1/

我测试每次使用选择器,两个选择器变量,以$ .merge变量(),并使用.新增().每次测试运行1000次.

我身边的结果如下(从快到慢):

1. 使用$ .merge()(平均7ms)
2. 一个接一个地使用两个变量(平均10ms,但代码需要重复)
3. 使用.add()(平均16ms)
4. 每次使用选择器(平均295ms)

Answer 3

您可以使用add或merge方法:
添加

$header_elements.add($footer_elements).css({color:'#f00'});

合并

$.merge($header_elements, $footer_elements).css({color:"#f00"});

两者都有效,但添加效果更好. 资料来源: http ://jsperf.com/add-vs-merge

信用:我赞成了@GenericTypeTea和@Gabriel的答案,做了两者的总结,比较了它们,这是结果.

Answer 4

传递引用数组：

$([$header_elements, $footer_elements]).css({color:"#ff0000"});