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

我有多个div的引用,我想将它们全部添加到一个jQuery对象.

这些东西不行？

>>> $( $e1,$e2,$e3 )
[div]

>>> $([ $e1,$e3 ])
[[div],[div],[div]]

>>> $().add($e1,$e3)
[div]

>>> $().add([ $e1,[div]]

但是这样做：

>>> $().add($e1).add($e2).add($e3)
[div,div,div]

>>> $e1.add($e2).add($e3)
[div,div]

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

解决方法

jQuery允许您一次性添加一组元素到jquery对象,但只有当这些元素是纯DOM元素时,而不是jquery对象本身.

var $e1 = $('#x'),$e2 = $('#y'),$e3 = $('#z');

var e1 = $e1[0],e2 = $e2[0],e3 = $e3[0];


>>> $( [$el,$e3] )    // does not work
[[div],[div]]       // jquery object that contains other jQuery objects

>>> $( [el,e2,e3] )       // works
[div,div]             // jquery object that contains pure DOM objects

当我们将jQuery对象数组传递给jQuery()时,在将它们添加到结果jquery对象之前,它们不会被“展开”.

但是请记住,传递一个单独的jquery对象会使展开发生.

>>> $( $e1 )
[div]                       // returns a jquery object

有趣的是,如果我们混合使用jQuery和纯DOM对象,只有纯对象才能运行：

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

请注意,第二个元素是纯DOM元素,背景颜色仅适用于该第二个元素.

底线是：如果要同时向jquery对象添加多个元素,请添加纯DOM对象,而不是jquery对象.