14

我无法理解 jQuery pushStack 函数（记录在http://api.jquery.com/pushStack/）。我试图在这个 Fiddle 的选择器中添加一个项目列表。

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 堆栈上是什么意思？

4

2 回答 2

12

.pushStack()创建一个新的 jQuery 对象，该对象从先前的 jQuery 对象继承状态。

这种继承状态允许类似.end()和.self()的方法正常工作。在您的特定代码示例中，您没有使用作为.pushStack()新 jQuery 对象的返回值。

使用 jQuery 对象时，重要的是要知道大多数更改 jQuery 对象中的 DOM 对象的操作都会返回一个带有更改的新 jQuery 对象，而不是修改现有的 jQuery 对象。正是这种设计特性使他们能够维护这个以前修改过的 jQuery 对象的堆栈。

在你的情况下，我认为你根本不需要使用.pushStack()，你可能只需要使用.add()（它也返回一个新的 jQuery 对象），但我不太清楚你想要做什么，所以我不确定要推荐什么代码。

要实现您在问题中显示的最终结果 HTML，您可以这样做：

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

您显然可以将 更改.appendTo()为您打算对新 DOM 对象执行的任何操作。

在您的评论中，您询问了更多关于何时使用pushStack(). 我认为主要用途是在返回新 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);
}
于 2012-04-17T19:28:57.430 回答
1

你不是在推动物体，试试这个：

$(function() {
var listStuff = $("p");
listStuff.css("color", "#f00");        
this.pushStack( listStuff.get() );
});​
于 2012-04-17T19:26:45.577 回答