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