是否有可能在jQuery中使用多个variables而不是select器

我知道这样做更快：

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操作。但是，我需要在两者上都做点什么。使用select器，我会这样做：

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

但是，DOM需要再次被parsing才能find匹配的元素。有没有办法使用我以前宣布的variables，而不是一个新的select器？像下面的东西（这是不工作，我知道，这是给我一个想法）：

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

我认为select器返回某种数组或对象。我正在寻找的是一种方法来合并这些。任何人都知道这是可能的，如何做到这一点？

谢谢你的帮助！

只需使用add方法：

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

给定一个代表一组DOM元素的jQuery对象，.add（）方法从这些元素的联合和传入方法的联合构造一个新的jQuery对象。 .add（）的参数可以是$（）接受的任何东西，包括jQueryselect器expression式，对DOM元素的引用或HTML代码片段。

在发布之后的几分钟里，我find了解决scheme。对于那些想知道的人来说，这里是：

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

它快吗？我还不知道，我需要运行一些testing来找出答案。

编辑：

我用JS小提琴在这里testing它： http : //jsfiddle.net/bgLfz/1/

我每次都使用select器进行testing，selectvariables，使用$ .merge（）variables和使用.add（）。每个testing运行1000次。

我的结果如下（从更快到更慢）：

您可以使用add或merge方法：
加

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

合并

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

这两个工作，但添加更高性能 。在这里输入图像说明 来源： http : //jsperf.com/add-vs-merge

信用：我upvoted @GenericTypeTea和@Gabriel答案，做了两个总结，比较他们，这里是结果。

传递一个引用数组：

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

不pipe性能如何，你会做一些类似的事情（即使它有效）：

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

或者分开做：

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

因为jQuery将内部通过使用each()提供的参数。

如果这个原则更多地受到DRY启发，而不是性能方面的话，你可以创build一个函数：

 function makeThemRed( el ) {el.css({color:"#ff0000"})}

接着

 makeThemRed($header_elements); makeThemRed($footer_elements);

甚至：

 function makeThemRed() { var l=arguments.length, o=0; while (o<l) { arguments[o++].css({color:"#ff0000"}) } }

接着

  makeThemRed($header_elements, $footer_elements); //any number of parameters

使用“合并”的事情是，它仅限于两个select器，如果超过两个，使用“add”将会非常混乱，所以如果超过两个，就应该使用如下所示的“each”：

 $([selector1, selector2, selector3, .....etc]).each(function(){ // your code here });

您始终可以将所有元素设置为一个variables：

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