2012-04-17 136 views
14

我無法理解jQuery pushStack函數(記錄在http://api.jquery.com/pushStack/)。我試圖添加一個項目列表到這個小提琴中的選擇器。jQuery 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堆棧意味着什麼?

+2

雖然含糊不清,但它是簡潔的(就像是例子)。將** DOM **元素推入堆棧,而不是jQuery包裝的元素。 – 2012-04-17 19:29:18

+0

謝謝,有什麼區別? – 2012-04-17 19:30:07

+0

[jQuery pushStack]的可能重複(http://stackoverflow.com/questions/4399055/jquery-pushstack) – Mottie 2013-02-21 23:29:41

回答

12

.pushStack()創建從以前的jQuery對象繼承狀態的新的jQuery對象。

該繼承狀態允許像.end().self()這樣的方法正常工作。在您特定的代碼示例中,您沒有使用來自.pushStack()這是新的jQuery對象的返回值。

當使用jQuery對象時,知道大部分改變DOM對象在jQuery對象中的操作都會返回一個新的jQuery對象,而不是修改現有的jQuery對象。正是這種設計特徵允許他們維護這堆先前修改過的jQuery對象。

就你而言,我認爲你根本不需要使用.pushStack(),你可能只需要使用.add()(它也會返回一個新的jQuery對象),但是我不清楚你在嘗試什麼要做到這一點,我不確定究竟推薦什麼代碼。

爲了實現最終的結果HTML,你在你的問題表明,你可以這樣做:

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

你可以明顯地改變.appendTo(),無論你打算用新的DOM對象做。

在你的意見中,你問到了什麼時候會用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); 
} 
+0

謝謝!有道理。我的目的是想知道如何使用pushStack。是否有相應的「begin()」函數 - 或者是pushStack本質上是在棧中開始一個新的「幀」的函數?我找不到任何地方。 – 2012-04-18 16:26:20

+1

@JohnHoffman - 'pushStack()'就像'begin()'。它創建一個與前一個鏈接的新jQuery對象。你不必使用'pushStack()',你可以創建一個新的jQuery對象,但是使用'pushStack()'讓'.end()'這樣的命令可以工作,因爲知道以前的鏈接版本。這是一個非常高級的使用模式,對於正常的jQuery用法不是必需的。 – jfriend00 2012-04-18 16:50:13

+1

@JohnHoffman - 當您從jQuery方法中返回一個jQuery對象時,'pushStack()'更有意義,因此它通常用於jQuery方法的內部實現,或者創建新的jQuery方法以生成新的jQuery目的。我從來沒有見過它在jQuery方法之外使用。 – jfriend00 2012-04-18 16:52:20

1

你是不是推對象,試試這個:

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