jQuery pagtatala - end() na pamamaraan

jQuery 輪詢參考手冊

Halimbawa

Pinili ang lahat ng mga paragrafo, hinahanap ang mga span elements ng mga paragrafo na ito, at ibabalik sila bilang paragrafo, at itatawag ang paragrafo na may dalawang porsiyong kulay puti na border na red.

$("p").find("span").end().css("border", "2px red solid");

親自試一試

Paglilinaw at paggamit

Ang end() na pamamaraan ay nagtatapos ng pinakabagong pagbubunton sa chain at nagbabalik sa naunang estado ng collection ng naaayon na elements.

Gramatika

.end()

Detalyadong paglalarawan

Ang karamihan ng mga pamamaraan ng pagtatala ng jQuery ay gumagawa ng isang bagong instance ng jQuery object at gumagawa ng isang bagong collection ng DOM elements. Kapag nangyayari ito, dapat ilagay ang bagong collection ng elements sa stack na pinapanatili sa object. Bawat matagumpay na pagtawag sa pamamaraan ng pagbubunton ay ilagay ang bagong elements sa stack. Kung kailangan ng lumang collection ng elements, magamit ang end() upang tanggalin ang bagong collection mula sa stack.

假設頁面中有一對很短的列表：

<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 的鏈條屬性（命令鏈）時，jQuery會比較有用。如果不使用命令鏈，我們一般通過變量名來調用之前的對象，這樣我們就不需要操作堆疊了。不過通過 end()，我們可以把所有方法調用串聯在一起：

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

親自試一試

這條命令鏈檢索第一個列表中類名為 foo 的項目，並將它們的背景設置為紅色。end() 將對象還原為調用 find() 之前的状态，所以第二個 find() 查找的是 <ul class="first"> 內的 '.bar' ，而不是在列表的 <li class="foo"> 中查找，並將匹配元素的背景設置為綠色。最後的結果是第一個列表中的項目 1 和項目 3 被設置了帶顏色的背景，而第二個列表中的項目沒有任何變化。

例子 2

這條長長的 jQuery 鏈可以視覺化為結構化的代碼塊，篩選方法打開嵌套代碼塊，而 end() 方法用於關閉代碼塊：

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

親自試一試

最後這個 end() 不是必須的，因為我們隨後會丟棄這個 jQuery 對象。不過，如果按照這種形式編寫代碼，end() 就能提供視覺上的對稱，以及規整程式的感觉，至少對於開發者來說更易於閱讀，當然代價則是因為進行了額外的調用，會有一點點性能損失。

jQuery 輪詢參考手冊