Aggiunta di più elementi jQuery/DOM a un singolo oggetto jQuery

Question

Ho riferimenti a più div e voglio aggiungerli tutti a UN oggetto jQuery in una volta.

Queste cose non funzionano ...

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

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

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

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

Tuttavia questo funziona:

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

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

Ma io voglio soluzione più elegante.

Answer 1

jQuery non consente di aggiungere un po 'di elementi in una sola volta a un oggetto jQuery, ma solo quando tali elementi sono puri elementi DOM, non oggetti jQuery stessi.

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 

Quando si passa un array di oggetti jQuery jQuery(), non sono "aperto" prima di aggiungerli all'oggetto risultato jquery.

Ricordare inoltre che il passaggio di un singolo oggetto jquery consente lo svolgimento della procedura.

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

È interessante notare che, se mescoliamo jquery e oggetti DOM puri, solo gli oggetti puri sono operati:

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

Nota sopra di tale secondo elemento è un elemento DOM puro e il colore di sfondo viene applicato solo a quel secondo elemento.

La riga di fondo è: se si desidera aggiungere più elementi a un oggetto jquery in una sola volta, aggiungere oggetti DOM puri, non oggetti jQuery.

Answer 2

loop su array usando ogni:

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

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

Answer 3

bene bisogna fare array di questi oggetti e spingere che in una variabile.

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 cassa del violino:

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