Dodawanie wielu elementów jQuery/DOM do pojedynczego obiektu jQuery

Question

Mam odwołania do wielu elementów div i chcę dodać je wszystkie do JEDYNEGO obiektu jQuery naraz.

Te rzeczy nie działają ...

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

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

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

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

Jednak to działa:

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

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

Ale chcę bardziej eleganckie rozwiązanie.

Answer 1

jQuery nie pozwalają, aby dodać kilka elementów na raz do obiektu jQuery, ale tylko wtedy, gdy elementy te są czyste elementy DOM, a nie obiekty jquery same.

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 

Kiedy mijamy tablicę obiektów jQuery jQuery() nie są one „rozpakować” przed dodaniem ich do obiektu wynik jQuery.

Pamiętaj jednak, że podanie pojedynczego obiektu jquery powoduje rozpakowanie.

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

Co ciekawe, jeśli mieszamy jQuery i czystych obiektów DOM, tylko czyste obiekty są eksploatowane na:

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

nocie powyżej tego drugiego elementu jest czystym elementem DOM i kolor tła jest stosowane tylko do tego drugiego elementu.

Najważniejsze to: jeśli chcesz dodać wiele elementów jednocześnie do obiektu jQuery, dodaj czysty obiekt DOM, a nie obiekty jquery.

Answer 2

Pętla na tablicy przy użyciu każda:

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

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

Answer 3

Więc trzeba zrobić tablicę tych obiektów i pchania, że ​​do zmiennej.

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 kasy na skrzypcach:

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