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()
})

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 checkout the fiddle：

<强> http://jsfiddle.net/nvRVG/1/

将多个jQuery / DOM元素添加到单个jQuery对象

3 个答案: