jQuery pushStack関数はどのように機能しますか？

Question

jQuery pushStack関数（http://api.jquery.com/pushStack/に記載されています）の理解に問題があります。私はこのフィドルのセレクタにアイテムのリストを追加しようとしました。

http://jsfiddle.net/johnhoffman/hTh8D/

JS：

$(function() { 
    var listStuff = $("p"); 
    listStuff.pushStack($("div")); 
    listStuff.css("color", "#f00");   
});​ 

HTML：

<p>foo</p> 
<div>bar</div>​ 

しかし、div要素のテキストは赤ではありません。要素をjQueryスタックにプッシュすることは何を意味しますか？あなたがオブジェクトをプッシュしていない

Answer 1

.pushStack()は、前回のjQueryオブジェクトから状態を継承する新しいjQueryオブジェクトを作成します。

この継承状態では、.end()や.self()などのメソッドを正しく動作させることができます。特定のコード例では、新しいjQueryオブジェクトである.pushStack()の戻り値を使用していません。

jQueryオブジェクトを操作する場合、jQueryオブジェクト内のDOMオブジェクトを変更する操作のほとんどが、既存のjQueryオブジェクトを変更するのではなく、変更された新しいjQueryオブジェクトを返すことが重要です。以前に変更されたjQueryオブジェクトのスタックを維持できるのはこの設計特性です。あなたのケースでは

、私はあなたがすべてで.pushStack()を使用する必要はないと思う、あなたはおそらく（また新しいjQueryオブジェクトを返す）.add()を使用することができますが、それはあなたがしようとしているものを私に正確に明確ではありませんそうするためには、私はどのコードを推薦するか正確にはわかりません。

は、あなたの質問に示した最終結果のHTMLを実現するには、この操作を行うことができます：

$(function() { 
    $("p").add("div").css("color", "#f00").appendTo(document.body);   
});​ 

あなたは明らかにあなたは、新しいDOMオブジェクトをどうするつもり何に.appendTo()を変更することができます。

あなたのコメントで、いつpushStack()をいつ使うのかについてもっと尋ねました。主な用途は、新しいjQueryオブジェクトを返すjQueryメソッドです。その場合、新しいjQueryオブジェクトに必要な要素の新しいリストを作成し、それを通常のjQueryオブジェクトに変換して返すのではなく、return this.pushStack(elems)を呼び出します。これで、新しいjQueryオブジェクトが作成されて返されますが、その新しいオブジェクトを前のオブジェクトにリンクすることで、.end()のような特別なコマンドがチェーンで使用されたときに機能するようになります。

jQuery .add()メソッドは古典的な例です。擬似コードでは、次のようになります。

add: function(selector, context) { 
    // get the DOM elements that correspond to the new selector (the ones to be added) 
    // get the DOM elements from the current jQuery object with this.get() 
    // merge the two arrays of elements together into one array 
    return this.pushStack(combinedElems); 
} 

Answer 2

、これを試してみてください。

$(function() { 
var listStuff = $("p"); 
listStuff.css("color", "#f00");   
this.pushStack(listStuff.get()); 
});​