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

但我想要更优雅的解决方案。

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 对象。

Answer 2

使用每个循环遍历数组：

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

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

请检查小提琴：

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