《jQuery Cookbook中文版》——1.9　根据当前上下文遍历DOM获得新的DOM元素集

本节书摘来自异步社区《jQuery Cookbook中文版》一书中的第1章，第1.9节，作者:【美】jQuery社区专家组译者：姚军 , 孙博更多章节内容可以访问云栖社区“异步社区”公众号查看。

1.9　根据当前上下文遍历DOM获得新的DOM元素集

1.9.1　问题
你已经选择了一组DOM元素，根据选择集在DOM结构树中的位置，你打算遍历DOM获得一个新的元素集以供操作。

1.9.2　解决方案
jQuery提供一组方法，可以根据当前选择的DOM元素的上下文遍历DOM。

例如，查看如下的HTML片段：

现在，用:eq()索引自定义选择器选择第2个元素：

//根据索引选择集合中的第2个元素,索引从0开始

jQuery('li:eq(1)');

现在有一个上下文——HTML结构中的一个出发点。出发点是第2个元素。从这里开始，可以到达任何位置——对，几乎任何位置。

让我们来看看，使用几个jQuery提供的DOM遍历方法能够到达哪里。代码中的注释就能说明问题：

jQuery('li:eq(1)').next() //选择第三个<li>
jQuery('li:eq(1)').prev() //选择第一个<li>
jQuery('li:eq(1)').parent() //选择<ul>
jQuery('li:eq(1)').parent().children() //选择所有<li>
jQuery('li:eq(1)').nextAll() //选择第二个<li>之后的所有<li>
jQuery('li:eq(1)').prevAll() //选择第二个<li>之前的所有<li>

记住，这些遍历方法产生新的包装器集，使用end()可以返回前一个包装器集。

1.9.3　讨论
目前为止介绍的遍历方法展示了简单遍历。要了解遍历，还必须知道另外两个重要的概念。

第一个概念可能显而易见——遍历方法可以链接。我们再来看看前面出现过的jQuery语句：

jQuery('li:eq(1)').parent().children() //选择所有<li>

注意，我已经从第二个元素遍历到父元素，然后再从父元素选择的所有子元素。jQuery包装器集现在包含的是中的所有元素。当然，这只是为了说明遍历方法而设计的例子。如果我们想要的是一个只元素的包装器集，从一开始就选择所有元素要简单得多（例如，jQuery('li')）。

处理遍历方法时需要牢记的第二个概念是许多方法都接受一个可选的参数，用于过滤选择集。我们仍然用链接的示例来说明这一点，看看如何修改代码，以便只选择最后一个

元素。别忘了，这个例子仅仅用来说明遍历方法如何传递用于选择特定元素的表达式：

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

jQuery还提供了其他遍历方法，在这里不作介绍。在本书里你将会看到这些遍历方法。