jquery中DOM節點操做（五）
5、遍歷節點樹javascript
1. 遍歷祖先：css
parent()： 返回被選元素的直接父元素，該方法只沿着 DOM 樹向上遍歷單一層級html
parents() ：返回被選元素的全部祖先元素，它一路向上直到文檔的根元素java
parentsUntil()：返回介於兩個給定元素之間的全部祖先元素jquery
<!DOCTYPE html>spa
<html lang="en">code
<head>htm
<meta charset="UTF-8">blog
<style type="text/css">ip
.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>
- 1. 【Jquery】- DOM 節點操做
- 2. jquery中DOM節點操作（五）
- 3. jquery中DOM節點操做（二）
- 4. jquery中DOM節點操做（四）
- 5. jquery中DOM節點操做（三）
- 6. jquery中DOM節點操做（六）
- 7. jquery中DOM節點操做（一）
- 8. jquery對dom節點的操做
- 9. jQuery DOM插入節點操做指南
- 10. jQuery DOM操做之刪除節點
- 更多相關文章...
- • XML DOM 節點 - XML DOM 教程
- • XML DOM 節點樹 - XML DOM 教程
- • RxJava操作符（五）Error Handling
- • Git五分鐘教程
-
每一个你不满意的现在，都有一个你没有努力的曾经。