关闭

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

标签: jqueryfunctionhtmldiv测试chm
282人阅读 评论(0) 收藏 举报
分类:

在上一章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()方法在线测试结果

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



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

jquery parents()方法在线测试

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

1 $("#test").click(function(){
2     $("span").parents("div").find("*").each(function(){//找到span的祖先元素中的div元素,然后再找到div元素中的 所有的元素
3         alert(this.nodeName);
4     });
5 });
jquery parents(selector)方法在线测试
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:400985次
    • 积分:4045
    • 等级:
    • 排名:第7655名
    • 原创:30篇
    • 转载:180篇
    • 译文:0篇
    • 评论:71条