將多個jQuery/DOM元素添加到單個jQuery對象中

Question

我有多個div的引用，我想將它們全部添加到一個jQuery對象中。

這些事情不工作...

>>> $($e1, $e2, $e3) 
[div] 

>>> $([ $e1, $e2, $e3 ]) 
[[div], [div], [div]] 

>>> $().add($e1, $e2, $e3) 
[div] 

>>> $().add([ $e1, $e2, $e3 ]) 
[[div], [div], [div]] 

但是這個工程：

>>> $().add($e1).add($e2).add($e3) 
[div, div, div] 

>>> $e1.add($e2).add($e3) 
[div, div, div] 

但我想更好的解決方案。使用每個

Answer 1

jQuery不會允許你一次添加了一堆元素的jQuery對象，但只有當這些元素純DOM元素，而不是jquery對象本身。

var $e1 = $('#x'), 
    $e2 = $('#y'), 
    $e3 = $('#z'); 

var e1 = $e1[0], 
    e2 = $e2[0], 
    e3 = $e3[0]; 


>>> $([$el, $e2, $e3]) // does not work 
[[div], [div], [div]]  // jquery object that contains other jQuery objects 

>>> $([el, e2, e3])  // works 
[div, div, div]    // jquery object that contains pure DOM objects 

當我們通過jquery的對象的陣列，以jQuery()，它們不會將它們添加到結果jquery對象之前「展開」。

但是，請記住，傳遞單個jquery對象會導致展開。

>>> $([$e1, e2, $e3]).css('background-color', '#000'); 

注意，第二元件上方是一個純粹的DOM元素和背景顏色僅應用於：

>>> $($e1) 
[div]      // returns a jquery object 

有趣的是，如果我們混合jQuery和純DOM對象，只有純的對象被作爲操作到第二個元素。

底線是：如果要一次向多個jquery對象添加多個元素，請添加純DOM對象，而不是jquery對象。

Answer 2

遍歷數組：

$.each([ $e1, $e2, $e3 ], function(i, $el){ 
    $el.doSomething() 
}) 

DEMO：http://jsfiddle.net/REXmh/

Answer 3

那麼你必須讓這些對象的數組，該推到一個變量。

var $a = $('<div/>').attr('class','box'); 
var $b = $('<div/>').attr('class','box'); 
var $c = $('<div/>').attr('class','box'); 
var $d = $('<div/>').attr('class','box'); 

var $arr = [$a, $b, $c, $d]; 

$.each($arr, function(i, el){ 
    $(el).text('asdf').appendTo('body'); 
}); 

PLZ檢出小提琴：

http://jsfiddle.net/nvRVG/1/