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

本文翻译自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 上找到。