addback( )和end()

最新更新: 2018-09-07 14:36:10 阅读: 18次
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 个列表项的背景色有颜色,而第二个列表中的任何项目都没有背景色。