将多个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对象.