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() 就能提供视觉上的对称，以及规整程序的感觉，至少对于开发者来说更易阅读，当然代价则是由于进行了额外的调用，会有一点点性能损失。