jquery中DOM节点操作（五）
五、遍历节点树
1. 遍历祖先：
parent()： 返回被选元素的直接父元素，该方法只沿着 DOM 树向上遍历单一层级
parents() ：返回被选元素的所有祖先元素，它一路向上直到文档的根元素
parentsUntil()：返回介于两个给定元素之间的所有祖先元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
.ancestors *{
padding: 5px;
margin: 15px;
display: block;
border: 2px solid lightgrey;
color: lightgrey;
}
</style>
<title>Document</title>
<script src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(function(){
// 遍历祖先
$("span").parent().css("color","red");
$("span").parents().css("color","blue");
$("span").parents("div").css("color","green");
$("span").parentsUntil("div").css("font-size","30px");
});
</script>
</head>
<body class="ancestors">body（曾曾祖父元素）
<div style="width: 500px;">div(曾祖父元素)
<ul>ul(祖父元素)
<li>li1(父元素)<span>span</span></li>
<li class="li2">li2</li>
<li>li3</li>
<li class="li4">li4</li>
<li>li5</li>
</ul>
</div>
</body>
</html>
2. 遍历同代
siblings（）：用于匹配目标元素的所有兄弟元素
next()：用于匹配元素的下一个兄弟节点
nextAll()：用于匹配元素的所有下一个兄弟节点
nextUntil()：用于匹配元素介于两个参数之间的所有下一个兄弟节点
prev()：用于匹配元素的上一个兄弟节点
prevAll()：用于匹配元素的所有上一个兄弟节点
prevUntil()：用于匹配元素介于两个参数之间的所有上一个兄弟节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
.ancestors *{
padding: 5px;
margin: 15px;
display: block;
border: 2px solid lightgrey;
color: lightgrey;
}
</style>
<title>Document</title>
<script src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(function(){
// 遍历同代
$(".li2").siblings().css("color","red");
$(".li2").siblings(".li4").css("color","green");
$(".li2").next().css("color","blue");
$(".li2").nextAll().css("font-size","30px");
$(".li2").nextAll(".li4").css("font-size","10px");
$(".li2").nextUntil(".li4").css("color","orange");
});
</script>
</head>
<body class="ancestors">body（曾曾祖父元素）
<div style="width: 500px;">div(曾祖父元素)
<ul>ul(祖父元素)
<li>li1(父元素)<span>span</span></li>
<li class="li2">li2</li>
<li>li3</li>
<li class="li4">li4</li>
<li>li5</li>
</ul>
</div>
</body>
</html>
转载于:https://my.oschina.net/u/2971691/blog/805373