遍历祖先元素
Jquery 提供了以下的方法向上遍历DOM树:
以下示例
1
<html>
2
<body>
3
<div>
4
<ul>
5
<li id="#li1">item1</li>
6
<li class="test">item2</li>
7
<li>item3</li>
8
</ul>
9
<p>Jsut for Test</p>
10
</div>
11
</body>
12
</html>
1
//获取<li>的父元素
2
$("#li1").parent().css({"border":"2px solid red"});
3
//获取<li>的所有父元素
4
$("#li1").parents().css({"border":"2px solid red"});
5
//获取<li>的到<div>为止的所有父元素
6
$("#li1").parentUnitl("div").css({"border":"2px solid red"});
遍历同胞元素
Jquery 提供了以下的方法向遍历DOM树的同胞元素:
这些方法的使用方式同遍历祖先元素的方法类似,同样都是返回一个或一组元素对象;
遍历后代元素
Jquery 提供了以下的方法向下遍历DOM树:
以下示例,使用上面的html文本作示例:
1
//返回div的所有下一层元素
2
$("div").children(); //返回<ul>,<p> 2个元素
3
//返回div元素所有子元素
4
$("div").find("*"); //返回<ul>,<p> 以及<ul>以下的所有<li>元素
遍历过滤器
Jquery 提供了以下的过滤器方法,可以用于在遍历元素时,添加过滤条件;
以下示例,使用上面的html文本作示例:
1
//返回ul下第一个li元素
2
$("ul").children().first(); //返回item1
3
//返回ul下最后一个li元素
4
$("ul").children().last(); //返回item3
5
//返回ul下第2个li元素
6
$("ul").children().eq(1); //返回item2
7
8
//返回ul元素下所有class="test"的li元素
9
$("ul").children().filter(".test"); //返回 item2
10
//返回ul元素下所有class!="test"的li元素
11
$("ul").children().not(".test"); //返回 item1,item3