遍历节点-parents()方法
.parents([selector])方法返回的是每一个匹配的元素的祖先元素的集合，这些祖先元素中，会包含html这个元素，我们还可以通过传入一个参数来对这些祖先元素进行筛选。
但是在jquery1.4.4 API中文chm文档中却是这样说的：
取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。可以通过一个可选的表达式进行筛选。
但是我测试过了根元素html的确是可以取到的。
下面来看测试代码：
| 代码如下 | 复制代码 |
|
<HTML> <DIV> <p> <SPAN>梦三秋</SPAN> </p> </DIV> <INPUT id=test value=获取span的所有的祖先元素 type=button> <DIV style="BORDER-BOTTOM: #ff0000 1px solid; BORDER-LEFT: #ff0000 1px solid; PADDING-BOTTOM: 10px; PADDING-LEFT: 10px; WIDTH: 250px; PADDING-RIGHT: 10px; DISPLAY: block; HEIGHT: 100px; BORDER-TOP: #ff0000 1px solid; BORDER-RIGHT: #ff0000 1px solid; PADDING-TOP: 10px" id=results></DIV> |
|
jquery代码：
| 代码如下 | 复制代码 |
|
$("#test").click(function(){ $("span").parents().each(function(index){ var index = index + 1; $("#results").append("span元素的第" + index + "祖先元素为<FONT color=red>" + this.nodeName + "</FONT>"); }); }); |
|
例
| 代码如下 | 复制代码 |
|
<div> <p> <span>梦三秋</span> </p> </div> <input type="button" id="test" value="获取span的所有的祖先元素"> |
|
下来还是上面的HTML代码，只不过在jquery代码中给.parents()方法传入一个参数，让它获取span元素的祖先元素中的div元素。
| 代码如下 | 复制代码 |
|
$("#test").click(function(){ $("span").parents("div").find("*").each(function(){//找到span的祖先元素中的div元素，然后再找到div元素中的 所有的元素 alert(this.nodeName); }); }); |
|
遍历节点-parent()方法
.parent([selector])方法返回的是每一个匹配的元素的父元素的集合。
这里selector是可选参数，是用于过滤父元素的选择器表达式。
| 代码如下 | 复制代码 |
|
<DIV class=demo> <DIV><p><A title=jquery href="">jquery</A>学习</p></DIV> <DIV class=selected><p>jquery教程</p></DIV> <DIV class=selected><p>jquery插件</p></DIV> </DIV> |
|
jquery代码：
| 代码如下 | 复制代码 |
| $("p").parent().css("background", "green");// | |
这样一来三个p的父元素div的背景色都会变成绿色
例
| 代码如下 | 复制代码 |
|
<style> div{padding:10px;margin:10px;} </style> <div class="demo"> <div><p>jquery学习</p></div> <div class="selected"><p>jquery教程</p></div> <div class="selected"><p>jquery插件</p></div> </div> <script>$("p").parent().css("background", "green");</script> |
|
再来给parent传入一个参数”.selected”
jquery代码：
| 代码如下 | 复制代码 |
| $("p").parent(".selected").css("background", "green");// | |
这样一来三个p的父元素div class为“selected”的背景色会变成绿色