jQuery之end()和pushStack()使用介紹

2024-09-06 20:04:42

字體：大中小

來源：轉載

供稿：網友

但在我們自己寫jQuery代碼的時候,卻很少關注或使用過pushStack(). 如果我們需要寫個涉及DOM遍歷的插件,它就會顯得尤其有用.

在jQuery內部,pushStack()方法通過改變一個jQuery對象的prevObject屬性來"跟蹤"鏈式調用中前一個方法返回的DOM結果集(被jQuery封裝過,也是個jQuery對象,說是"跟蹤",是因為實際存儲的是個引用). 當我們再鏈式調用end()方法后, 內部就返回當前jQuery對象的prevObject. 具體更多細節, 直接看源碼即可. 這里只做個簡單的分析, 直接來個例子:

html:
復制代碼代碼如下:
<div >
I am grandparent.
<div >
I am parent.
<div >
I am child.
</div>
</div>
</div>

javascript:
復制代碼代碼如下:
var els = $('#child').parent().parent();
console.dir(els);

圖解:

了解這個之后, 我們來做一個grandparent插件,用來替代.parent().parent()這樣連續2次的調用,直接用.grandparent().如果"一不小心"沒考慮end()的話,代碼很可能就是這個樣子的:

復制代碼代碼如下:
$.fn.grandparent = function() {
return this.parent().parent();
};

依舊用上面那個例子:

復制代碼代碼如下:$('#child').grandparent().end(); //jQuery-[div#parent]

很顯然, 大多數情況下這不是我們想要的, 事實上我們想通過鏈式調用end()直接返回到jquery[div#child]. 現在該是pushStack出馬的時候了,我們只要加上一行即可:

復制代碼代碼如下:
$.fn.grandparent = function() {
var els = this.parent().parent();
return this.pushStack(els.get());
};

在pushStack內部, 把els.get()返回的DOM數組封裝成一個新的jQuery對象, 而this(jQuery[div#child])會賦值給之前新構建jQuery的prevObject, 最后返回新生的那個jQuery對象.

所以這次, 當我們再用end()就對了:
復制代碼代碼如下:
var grandparent = $('#child').grandparent()./* jquery-[div#grandparent]*/.end() /*jquery-[div#child]*/

此博文內容的主體思想來自Learning JQuery中的一篇博客, 感謝該作者的分享. 感興趣的話, 點擊jQuery pushStack.

上一篇：jquery $.fn $.fx是什么意思有什么用

下一篇：jQuery實現導航回彈效果