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