将多个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]

但我希望有更优雅的解决方案。

- treecoder

---

$el1、$el2和$el3是什么？之前由jQuery选择的DOM元素？ - Benjamin Gruenbaum

为什么不把它们放进一个数组里呢？ - Gurpreet Singh

我怎么（优雅地）将该数组转换为 jQuery 对象？ - treecoder

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

有趣的是，如果我们混合使用jquery和纯DOM对象，只有纯对象会被操作：

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

请注意上面的第二个元素是一个纯 DOM 元素，背景颜色仅应用于该第二个元素。

最重要的是：如果您想一次添加多个元素到 jQuery 对象中，请添加纯 DOM 对象，而不是 jQuery 对象。

- treecoder

---

jQuery 在这里让我失望了。 - Muhammad Umer

Answer 2

使用each循环遍历数组：

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

示例：http://jsfiddle.net/REXmh/

- charlietfl

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');
});

请查看这个 fiddle：

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

- Jai

---

那么你想在每个 div 中添加相同的文本吗？ - Jai