實(shí)例
選擇所有段落,找到這些段落中的 span 元素,然后將它們恢復(fù)為段落,并把段落設(shè)置為兩像素的紅色邊框:
$("p").find("span").end()
.css("border", "2px red solid");
定義和用法
end() 方法結(jié)束當(dāng)前鏈條中的最近的篩選操作,并將匹配元素集還原為之前的狀態(tài)。
語(yǔ)法
.end()
詳細(xì)說明
大多數(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ì)比較有用。如果不使用命令鏈,我們一般是通過變量名來調(diào)用之前的對(duì)象,這樣我們就不需要操作堆棧了。不過通過 end(),我們可以把所有方法調(diào)用串聯(lián)在一起:
$('ul.first').find('.foo').css('background-color', 'red')
.end()
.find('.bar').css('background-color', 'green');
這條命令鏈檢索第一個(gè)列表中類名為 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)目沒有任何變化。
例子 2
這條長(zhǎng)長(zhǎng)的 jQuery 鏈可以可視化為結(jié)構(gòu)化的代碼塊,篩選方法打開嵌套代碼塊,而 end() 方法用來關(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ì)象。不過,如果按照這種形式編寫代碼,end() 就能提供視覺上的對(duì)稱,以及規(guī)整程序的感覺,至少對(duì)于開發(fā)者來說更易閱讀,當(dāng)然代價(jià)則是由于進(jìn)行了額外的調(diào)用,會(huì)有一點(diǎn)點(diǎn)性能損失。
更多建議: