是否有可能在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'}); 

给定一个jQuery代表 一套DOM元件，所述。新增（） 方法从这些的结合构建一个新的jQuery对象 元素和 传入该方法。 .add（）的参数 几乎可以接受任何$（）接受的东西，包括 jQuery选择器表达式，DOM元素的参考 或HTML代码片段。

Answer 2

不要紧性能明智的羯羊，你会做这样的事情（即使它的工作）：

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

或单独做他们：

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

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

如果原则是更DRY启发，不是性能明智的，你可以创建一个函数：

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 

Answer 3

传递引用数组：

​​

Answer 4

我找到了解决方案张贴这几分钟后。对于那些想知道的人来说，这里是：

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

它是否更快？我还不知道，我需要运行一些测试来找出答案。

编辑：

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

我测试每次使用选择，可变两种选择，以$ .merge变量（）和使用。新增（）。每次测试运行1000次。在我身边

结果如下（从更快的速度较慢）：

1. 使用$ .merge（）（平均为7毫秒）
2. 使用后，其他（平均为10ms两个变量之一，但代码需要被复制）
3. 使用。新增（）（平均为16ms）
4. 使用选择每次（平均295ms）

Answer 5

你凑LD总是设置所有的元素，以一个变量：

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

Answer 6

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

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

合并

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

两个工作，但是增加更高性能。 来源：​​3210

信用：我upvoted @GenericTypeTea和@Gabriel的答案，都做的总结，比较他们和这里的结果。

Answer 7

使用'合并'的事情是，它仅限于两个选择器，如果它超过两个，使用'add'将会非常混乱，所以如果它超过两个，则应该使用这样的'each' ：

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