jQuery 遍歷 - end() 方法 · W3School jQuery 參考手冊

# jQuery 遍歷 - end() 方法 ## 實例選擇所有段落，找到這些段落中的 span 元素，然后將它們恢復為段落，并把段落設置為兩像素的紅色邊框： ``` $("p").find("span").end().css("border", "2px red solid"); ``` ## 定義和用法 end() 方法結束當前鏈條中的最近的篩選操作，并將匹配元素集還原為之前的狀態。 ### 語法 ``` .end() ``` ### 詳細說明大多數 jQuery 的遍歷方法會操作一個 jQuery 對象實例，并生成一個匹配不同 DOM 元素集的新對象。當發生這種情況時，應該會把新的元素集推入維持在對象中的堆棧內。每次成功的篩選方法調用都會把新元素推入堆棧中。如果我們需要老的元素集，可以使用 end() 從堆棧中彈出新集合。假設頁面中有一對很短的列表： ``` <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() 就能提供視覺上的對稱，以及規整程序的感覺，至少對于開發者來說更易閱讀，當然代價則是由于進行了額外的調用，會有一點點性能損失。