原文：?https://www.cnblogs.com/AndyWithPassion/archive/2012/02/06/jquery_pushStack_javascript.html

jquery.fn.end()方法， pushStack()

jQuery之end()和pushStack()

pushStack()方法在jQuery的DOM操作中被頻繁的使用, 如在parent(), find(), filter()中, 當(dāng)然還有其他許多類(lèi)似的方法, 它們往往需要返回一個(gè)jQuery封裝過(guò)的DOM結(jié)果集.但在我們自己寫(xiě)jQuery代碼的時(shí)候,卻很少關(guān)注或使用過(guò)pushStack(). 如果我們需要寫(xiě)個(gè)涉及DOM遍歷的插件,它就會(huì)顯得尤其有用.

在jQuery內(nèi)部,pushStack()方法通過(guò)改變一個(gè)jQuery對(duì)象的prevObject屬性來(lái)"跟蹤"鏈?zhǔn)秸{(diào)用中前一個(gè)方法返回的DOM結(jié)果集(被jQuery封裝過(guò),也是個(gè)jQuery對(duì)象,說(shuō)是"跟蹤",是因?yàn)閷?shí)際存儲(chǔ)的是個(gè)引用). 當(dāng)我們?cè)冁準(zhǔn)秸{(diào)用end()方法后, 內(nèi)部就返回當(dāng)前jQuery對(duì)象的prevObject. 具體更多細(xì)節(jié), 直接看源碼即可. 這里只做個(gè)簡(jiǎn)單的分析, 直接來(lái)個(gè)例子:

html:

1 <div id="grandparent">2 I am grandparent.3 <div id="parent">4 I am parent.5 <div id="child">6 I am child.7 </div>8 </div>9 </div> 10

javascript:

1 var els = $('#child').parent().parent(); 2 console.dir(els);

圖解:

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

$.fn.grandparent = function() { ????return?this.parent().parent(); };

依舊用上面那個(gè)例子:

1	$('#child').grandparent().end();?//jQuery-[div#parent]

很顯然, 大多數(shù)情況下這不是我們想要的, 事實(shí)上我們想通過(guò)鏈?zhǔn)秸{(diào)用end()直接返回到j(luò)query[div#child]. 現(xiàn)在該是pushStack出馬的時(shí)候了,我們只要加上一行即可:

1 2 3 4

$.fn.grandparent =?function() { ????var?els =?this.parent().parent(); ????return?this.pushStack(els.get()); };

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

所以這次, 當(dāng)我們?cè)儆胑nd()就對(duì)了:

var?grandparent = $('#child').grandparent()./* jquery-[div#grandparent]*/.end() /*jquery-[div#child]*/

此博文內(nèi)容的主體思想來(lái)自Learning JQuery中的一篇博客, 感謝該作者的分享. 感興趣的話, 點(diǎn)擊jQuery pushStack.

------------------------------------------------------------------------------------------------------------

end() 方法結(jié)束當(dāng)前鏈條中的最近的篩選操作，并將匹配元素集還原為之前的狀態(tài)。

語(yǔ)法

.end()

詳細(xì)說(shuō)明

大多數(shù) jQuery 的遍歷方法會(huì)操作一個(gè) jQuery 對(duì)象實(shí)例，并生成一個(gè)匹配不同 DOM 元素集的新對(duì)象。當(dāng)發(fā)生這種情況時(shí)，應(yīng)該會(huì)把新的元素集推入維持在對(duì)象中的堆棧內(nèi)。每次成功的篩選方法調(diào)用都會(huì)把新元素推入堆棧中。如果我們需要老的元素集，可以使用 end() 從堆棧中彈出新集合。

假設(shè)頁(yè)面中有一對(duì)很短的列表：

<ul class="first"><li class="foo">list item 1</li><li>list item 2</li><li class="bar">list item 3</li> </ul> <ul class="second"><li class="foo">list item 1</li><li>list item 2</li><li class="bar">list item 3</li> </ul>

例子 1

主要是在利用 jQuery 的鏈條屬性（命令鏈）時(shí)，jQuery 會(huì)比較有用。如果不使用命令鏈，我們一般是通過(guò)變量名來(lái)調(diào)用之前的對(duì)象，這樣我們就不需要操作堆棧了。不過(guò)通過(guò) end()，我們可以把所有方法調(diào)用串聯(lián)在一起：

$('ul.first').find('.foo').css('background-color', 'red').end().find('.bar').css('background-color', 'green');

親自試一試

這條命令鏈檢索第一個(gè)列表中類(lèi)名為 foo 的項(xiàng)目，并把它們的背景設(shè)置為紅色。end() 會(huì)將對(duì)象還原為調(diào)用 find() 之前的狀態(tài)，所以第二個(gè) find() 查找的是 <ul class="first"> 內(nèi)的 '.bar' ，而不是在列表的 <li class="foo"> 中查找，并將匹配元素的背景設(shè)置為綠色。最后的結(jié)果是第一個(gè)列表中的項(xiàng)目 1 和項(xiàng)目 3 被設(shè)置了帶顏色的背景，而第二個(gè)列表中的項(xiàng)目沒(méi)有任何變化。

例子 2

這條長(zhǎng)長(zhǎng)的 jQuery 鏈可以可視化為結(jié)構(gòu)化的代碼塊，篩選方法打開(kāi)嵌套代碼塊，而 end() 方法用來(lái)關(guān)閉代碼塊：

$('ul.first').find('.foo').css('background-color', 'red') .end().find('.bar').css('background-color', 'green') .end();

親自試一試

最后這個(gè) end() 不是必需的，因?yàn)槲覀冸S后會(huì)丟棄這個(gè) jQuery 對(duì)象。不過(guò)，如果按照這種形式編寫(xiě)代碼，end() 就能提供視覺(jué)上的對(duì)稱(chēng)，以及規(guī)整程序的感覺(jué)，至少對(duì)于開(kāi)發(fā)者來(lái)說(shuō)更易閱讀，當(dāng)然代價(jià)則是由于進(jìn)行了額外的調(diào)用，會(huì)有一點(diǎn)點(diǎn)性能損失。

------------------------------------------------------------------------------

轉(zhuǎn)載于:https://www.cnblogs.com/oxspirt/p/10780436.html

總結(jié)

以上是生活随笔為你收集整理的jQuery之end()和pushStack()的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。