11

複数の div への参照があり、それらすべてを一度に 1 つの 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]

しかし、よりエレガントなソリューションが必要です。

4

3 に答える 3

14

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 オブジェクトに追加する前に「ラップ解除」されません。

ただし、1 つの jquery オブジェクトを渡すと、ラップ解除が行われることにも注意してください。

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

興味深いことに、jquery と純粋な DOM オブジェクトを混在させると、純粋なオブジェクトのみが操作されます。

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

上記の 2 番目の要素は純粋な DOM 要素であり、背景色はその 2 番目の要素にのみ適用されることに注意してください。

要するに、jquery オブジェクトに一度に複数の要素を追加する場合は、jquery オブジェクトではなく、純粋な DOM オブジェクトを追加することです。

于 2012-12-16T18:20:09.327 に答える
2

それぞれを使用して配列をループします。

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

デモ: http://jsfiddle.net/REXmh/

于 2012-12-16T14:56:22.087 に答える
1

これらのオブジェクトの配列を作成し、それを変数にプッシュする必要があります。

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/

于 2012-12-16T15:11:37.883 に答える