하나의 jQuery 객체에 여러 jQuery/DOM 요소 추가하기

Question

여러개의 div에 대한 참조가 있으며, 이들을 모두 한 번에 하나의 jQuery 객체에 추가하려고합니다.

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

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

그러나 나는 더 우아한 솔루션을 원하는 :

이런 일들이 작동하지 않습니다 ...

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

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

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

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

그러나이 작동합니다. 각을 사용하여 배열을 통해

Answer 1

순수한 DOM 요소이며 jquery 객체 자체는 아닙니다. 우리가 jQuery()에 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와 객체에 추가하기 전에 "풀어"NOT입니다.

그러나 단일 jquery 객체를 전달하면 unwrapping이 발생합니다. 순수한 DOM 요소가 그 두 번째 요소 위에

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

참고하고 배경 색상 만 적용됩니다 : 우리가 JQuery와 순수 DOM 객체를 혼합하는 경우

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

흥미롭게도, 오직 순수한 객체에 작동 그 두 번째 요소.

결론은 jquery 객체에 여러 요소를 한 번에 추가하려면 jquery 객체가 아닌 순수한 DOM 객체를 추가하는 것입니다.

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/

jQuery를이하지만, 그 요소가있는 경우에만, 당신이 JQuery와 개체를 한 번에 요소의 무리를 추가 할 수 않습니다