jQuery-besøg - end() metode

jQuery 覆蓋參考手冊

Eksempel

Vælg alle afsnit, find de span-elementer i disse afsnit og gendan dem som afsnit, og sæt afsnittet til en to pixels tyk rød kant:

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

親自試試

Definition og brug

end() metoden afslutter den nærmeste filtrering i den aktuelle kæde og gendanner matchende elementgrupper til deres tidligere tilstand.

Syntax

.end()

Detaljeret forklaring

De fleste jQuery-besøgsmetoder opererer med en jQuery-objektinstans og genererer en ny objektinstans, der matcher en samling af forskellige DOM-elementer. Når dette sker, skal den nye elementgruppe tilføjes til stakken, der opretholdes i objektet. Hver succesfuld filtrering afkald vil tilføje de nye elementer til stakken. Hvis vi har brug for den gamle elementgruppe, kan vi bruge end() til at hente den nye samling fra stakken.

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

<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 覆蓋參考手冊