JQ addback( ) 與 end ( ) 區別

addback () 返回當前的元素與先前的元素的集合

end( ) 只返回鏈式結構中先前的元素。

例子:addback():

考慮一個頁面,一個簡單的列表就可以了:

1
2
3
4
5
6
7
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li class="third-item">list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>

下面的代碼的返回結果是後面3,4和5項是一個紅色的背景:

1
2
$('li.third-item').nextAll().addBack()
.css('background-color', 'red');


end():

假設頁面上有幾個短的列表

1
2
3
4
5
6
7
8
9
10
<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>

end() 方法主要用於 jQuery 的鏈式屬性中。當沒有使用鏈式用法時,我們通常只是調用變量名上的前一個對象,所以我們不需要操作棧。使用 end() 時,我們可以一次性調用所有需要的方法:

1
2
$('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 個列表項的背景色有顏色,而第二個列表中的任何項目都沒有背景色。             

例子代碼詳見:http://www.jquery123.com/end/
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章