我无法理解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堆栈是什么意思？
解决方法
.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);
}
