jQuery基础教程之DOM操作-遍历节点-parents()方法

在上一章jQuery教程基础篇之DOM操作-遍历节点-parent()方法，我们讲到了如何获取元素的父元素的集合，有时候我们的需求可能会要查找元素的所有的祖先元素，那么.parents()方法将会满足我们的需求。

.parents([selector])方法返回的是每一个匹配的元素的祖先元素的集合，这些祖先元素中，会包含html这个元素，我们还可以通过传入一个参数来对这些祖先元素进行筛选。

但是在jquery1.4.4 API中文chm文档中却是这样说的：
取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。可以通过一个可选的表达式进行筛选。

但是我测试过了根元素html的确是可以取到的。
下面来看测试代码：
HTML代码：

1<div>

2    <p>

3        <span>梦三秋</span>

4    </p>

5</div>

6<input type="button" id="test" value="获取span的所有的祖先元素">

7<div id="results" style="display:block;padding:10px;border:1px solid #FF0000;width:250px;height:100px;"></div>

jquery代码：

1$("#test").click(function(){

2    $("span").parents().each(function(index){

3        var index = index + 1;

4        $("#results").append("span元素的第" + index + "祖先元素为<font color="red">" + this.nodeName + "</font>");

5    });

6});

测试结果如下图：

jquery parents()方法在线测试结果

通过点击一个按钮，来获取span的所有的祖先元素的tag标签。这里正好和大家解释一下，nodeName这个属性是DOM对象的属性，代表的是DOM对象的html tag。
上面的代码我已经为大家做好了在线DEMO了，请大家点击下面的DEMO按钮去查看结果：

接下来还是上面的HTML代码，只不过在jquery代码中给.parents()方法传入一个参数，让它获取span元素的祖先元素中的div元素。
Jquery代码：

view source

print?

1$("#test").click(function(){

2    $("span").parents("div").find("*").each(function(){//找到span的祖先元素中的div元素，然后再找到div元素中的 所有的元素

3        alert(this.nodeName);

4    });

5});