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

转载 2012年03月31日 15:54:03

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

相关文章推荐

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

.closest() 此方法获取第一个相匹配的祖先元素,注意:起始点包括自身元素。 另外这个方法是必须要传入一个选择器表达式参数的,如果不传入参数的话,就会返回一个空的jquery对象。 要...

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

.prev([selector]) 此方法取得每个匹配的元素的前一个同辈元素的元素集合。 可以用一个可选的表达式进行筛选。只有紧邻的同辈元素会被匹配到,而不是前面所有的同辈元素。 下面来...

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

上一章我们说了jQuery教程基础篇之DOM操作-遍历节点-children()方法,那接下来,正好说说parent()方法。 .parent([selector])方法返回的是每一个匹配的元素...

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

在前面的两节教程中,我们分别知道了jquery如何取得当前元素的前一个同辈元素以及后一个同辈元素,他们分别是.prev()方法和.next()方法。 那么肯定的了,既然在jquery中能取得前一个和...

jQuery基础教程之DOM操作-节点操作函数(一)

jQuery作为Javascript的一个强大的库,其对DOM对象的操作之简化,让开发人员甚至于小白们都为之赞叹不已。 接着上一个系列的jQuery选择器的教程,接下来教大家的是jQuery中的DO...

jQuery基础教程之DOM操作-节点操作函数(二)

这一篇文章是接着jQuery教程基础篇之DOM操作-节点操作函数(一)这篇文章的,如果您还没看过,请不妨先读读上一篇,然后再来看这篇文章吧。 废话不多说,我们接着上一篇来吧~ 插入节点...

jQuery基础教程之DOM操作-节点操作函数(一)

jQuery基础教程之DOM操作-节点操作函数(一) 发表于 2011 年 01 月 20 日 由 梦三秋 jQuery作为Javascript的一个强大的库,其对DOM对象的操作之...

《jQuery基础教程》-- 操作DOM

1.操作属性 之前的css方法还有addClass、removeClass、toggleClass都是对DOM元素进行style属性的操作。而对于其他属性则可以使用attr和removeAttr来实...

jQuery基础教程之DOM操作-属性操作

jquery中,用attr()方法来获取和设置元素属性,对应地,removeAttr()方法是用来删除元素属性。 attr() 这个函数有四个用法: 用法 ...

jQuery基础教程之DOM操作-HTML&文本&值的操作

今天主要讲解jquery中的三个方法的使用,他们分别是html()、text()、val()。 这三个jquery方法的使用方式一样都有三种,下面请看用法和DEMO。 html() ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)