重点:重点:重点:向上遍历兄弟节点的所有方法,选择的前一个元素,必须要是class的名字或者Id名字,不能和向下遍历兄弟节点一样直接指定标签,否则只遍历头一个
再一个,遍历所指定的区间都是开区间,如parentUntil()、nextUntil()、prevUntil(),也就是不包含首末两个元素
HTML代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>同级遍历</title>
<script src="jquery-3.3.1.js"></script>
<script src="traverseColleague.js"></script>
<style>
div *{
display: block;
/*块元素显示,带有换行符*/
border: 3px solid goldenrod;
color: blueviolet;
padding: 10px;
margin: 15px;
}
</style>
</head>
<body>
<div>
<h2>法师</h2>
<h3>猎人</h3>
<h4>德鲁伊</h4>
<h5 id="Idh5" class="classH5">术士</h5>
<h6>圣骑士</h6>
</div>
<button id="siblingsBtn">siblings</button>
<button id="nextBtn">next</button>
<button id="nextAllBtn">nextAll</button>
<button id="nextUntilBtn">nextUntil</button>
<button id="prevBtn">prev</button>
<button id="prevAllBtn">prevAll</button>
<button id="prevUntilBtn">prevUntil</button>
</body>
</html>
JS代码:
$(document).ready(function () {
$("#siblingsBtn").click(function () {
$("h3").siblings().css({color:"red"});
});
$("#nextBtn").click(function () {
$("h3").next().css({color:"red"});
});
$("#nextAllBtn").click(function () {
$("h3").nextAll().css({color:"red"})
});
$("#nextUntilBtn").click(function () {
$("h3").nextUntil("h5").css({color:"red"})
});
$("#prevBtn").click(function () {
$("#Idh5").prev().css({color:"red"});
});
$("#prevAllBtn").click(function () {
$("#Idh5").prevAll().css({color:"red"})
});
$("#prevUntilBtn").click(function () {
$(".classH5").prevUntil("h3").css({color:"red"})
});
});
//
//重点:重点:重点:向上遍历兄弟节点的所有方法,选择的前一个元素,必须要是class的名字或者Id名字
// 不能和向下遍历兄弟节点一样直接指定标签,否则只遍历头一个
//
//siblingsBtn修改同级除自己以外其他所有元素
//next下一个兄弟元素
//nextAll向下所有的兄弟元素
//nextUntil指定区间(开区间)
效果: