jquery - jQuery:新しい要素を作成してコレクションに追加する方法は?

Question

jQueryでいくつかのDOMノードを作成し、それらを選択したままhtmlに追加したいので、それらを再度選択する必要はありません。

これは私のコードです:

var foo=$('');
for(var i=0;i<10;i++){
    var bar=$('<div>');
    $('body').append(bar);
    foo.add(bar);
}

どうやら foo は最終的に空のままになるので、うまくいきません。最後にすべてのバーを選択せずに、どのように対処すればよいですか?

score 3 · Accepted Answer

jQuery オブジェクトではなく、配列を使用できます。

var foo = [];
for(var i=0; i < 10; i++) {
  var bar = $('<div>');
  $('body').append(bar);
  foo.push(bar[0]);
}
foo = $(foo);

score 2 · Accepted Answer

この問題の原因は、.add()メソッドが元の jQuery コレクションオブジェクトを変更せず、新しいものを返すことです。

コードを次のように変更するだけです。

var foo=$('');
for(var i=0;i<10;i++){
    var bar=$('<div>');
    $('body').append(bar);
    foo = foo.add(bar);
}

console.log(foo);

score 1 · Accepted Answer

jQuery コレクションに新しい要素を追加するには、を使用しますfoo = foo.add(bar)。

コードの更新バージョンは次のとおりです。

var foo = $();
for (var i = 0; i < 10; i++) {
    var bar = $("<div />").appendTo("body");
    foo = foo.add(bar);
}
foo.css("color", "red");

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

3 に答える 3