Подтвердить что ты не робот

Добавление нескольких элементов jQuery/DOM в один объект jQuery

У меня есть ссылки на несколько 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]

Но я хочу более элегантное решение.

Ответ 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 )
[div]                       // returns a jquery object

Интересно, что если мы смешаем jquery и чистые объекты DOM, на них будут работать только чистые объекты:

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

Обратите внимание, что второй элемент является чистым элементом DOM, а цвет фона применяется только к этому второму элементу.

В нижней строке: если вы хотите добавить сразу несколько элементов в объект jquery, добавьте чистый объект DOM, а не объекты jquery.

Ответ 2

Перебирать массив по каждому из них:

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

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

Ответ 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/