jQuery参考实例 1.9 以当前选择的元素为起点，遍历查找DOM对象

原文：

http://www.lifelaf.com/blog/?p=216

本文翻译自jQuery Cookbook (O’Reilly 2009) 1.9 Traversing the DOM Based on Your Current Context to Acquire a New Set of DOM Elements

需求

在选择一个DOM元素集后，需要基于该元素集中的对象在DOM树中的位置来遍历查找，并得到一个新的元素集。

解决方案

以当前选择的元素(集)为起点，遍历查找DOM对象，jQuery提供了一系列的方法来完成这样的操作。

以下面的HTML片段为例：

<div>
<ul>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</ul>
</div>

可用:eq()索引选择器来选中第二个<li>元素：

//用索引值选择li元素集中的第二个元素，索引值从0开始计算。
jQuery('li:eq(1)');

在选中第二个<li>后，可以将其作为标杆，或者说，作为遍历查找DOM对象的起点。从该元素出发，可以遍历到几乎所有的DOM对象。以下是一些使用jQuery方法来做遍历的例子：

jQuery('li:eq(1)').next() //选择第3个li元素
jQuery('li:eq(1)').prev() //选择第1个li元素
jQuery('li:eq(1)').parent() //选择ul元素
jQuery('li:eq(1)').parent().children() //选择所有的li元素
jQuery('li:eq(1)').nextAll() //选择第2个li元素之后的所有元素
jQuery('li:eq(1)').prevAll() //选择第2个li元素之前的所有元素

值得注意的是，上述几个遍历方法均生成了新的元素集。如果需要返回到原先的那个元素集，可以使用end()方法。

讨论

迄今为止我们所见到的遍历方法都是比较简单的。除此之外，还有两个比较重要的概念值得介绍一下。

第一个概念，也是比较明显的一点，就是jQuery中的遍历方法可以连起来使用。我们来看一下上述例子中的一个语句：

jQuery('li:eq(1)').parent().children() //选择所有的li元素

在这个语句中，jQuery首先通过parent()方法得到<li>对象的父元素<ul>，然后再通过children()方法得到该<ul>对象的所有子元素。该语句执行后的jQuery元素集将包含所有<ul>对象内的<li>元素。当然，上述代码只是作为演示用。在实际情况中，对于选择所有的<li>元素，比较简单的方法是直接使用jQuery函数（比如：jQuery(‘li’)）。

第二个需要注意的概念，是当遍历查找DOM对象的时候，很多遍历方法可以接受一个可选参数来进行过滤。还是以上面的语句为例，通过添加参数的方法可以只选中最后一个<li>元素（以下代码仅用于演示如何通过传入表达式参数，来选择特定的元素。实际情况中一般不会出现这样的写法）：

jQuery('li:eq(1)').parent().children(':last') //选择最后一个li元素

除了上面几个例子中提到的，jQuery还提供很多别的遍历方法。全部的遍历方法可以在 http://docs.jquery.com/Traversing上找到。