注意:parentUntil方法指定的区间是开区间。
HTML代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>向上遍历</title>
<script src="jquery-3.3.1.js"></script>
<script src="traverseUpText.js"></script>
</head>
<style>
#container{
width: 425px;
height: 250px;
border:10px solid cornflowerblue;
}
#wrapper{
width: 305px;
height: 145px;
margin-top: 15px;
margin-left: 15px;
border: 6px solid forestgreen;
}
ul{
width: 175px;
height: 65px;
margin-top: 15px;
margin-left: 15px;
border: 2px solid firebrick;
}
</style>
<body>
<div id="container">容器
<div id="wrapper">承载列表
<ul id="content">
<li>法师</li>
<li>德鲁伊</li>
<li>潜行者</li>
</ul>
</div>
</div><br/><br/>
<button id="parentBtn">parent</button>
<button id="parentsBtn">parents</button>
<button id="parentsUntilBtn">parentsUntil</button>
</body>
</html>
JS代码;
$(document).ready(function () {
$("#parentBtn").click(function () {
$("ul").parent().css({border:"8px solid black"});
});
$("#parentsBtn").click(function () {
$("ul").parents().css({border:"8px solid black"});
});
$("#parentsUntilBtn").click(function () {
$("li").parentsUntil("#container").css({border:"8px solid blueviolet"});
});
});
//parent()只能向上遍历一级也就是父节点,括号里面也只能添加一级父节点
//parents()向上遍历所有的元素
//parentsUnitil指定向上遍历的区间,$指定开始部分,parentUntil括号里面添加结束的部分
效果;