<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>关系查找-同级</title>
</head>
<body>
<div class="box" id="box">
<div class="box1" id="box1">
<div class="box2" id="box2">
<ul class="box3" id="box3">
<li class="li1" id="li1">我是li1</li>
<p class="p1" id="p1">我是p标签</p>
<li class="li2" id="li2">我是li2</li>
<li class="li3" id="li3">我是li3</li>
<li class="li4" id="li4">我是li4</li>
<li class="li5" id="li5">我是li5</li>
<li class="li6" id="li6">我是li6</li>
<li class="li7" id="li7">我是li7</li>
<li class="li8" id="li8">我是li8</li>
<li class="li9" id="li9">我是li9</li>
</ul>
</div>
</div>
</div>
<script src="../jquery/jquery-3.3.1.js"></script>
<script>
$(function(){
console.log($(".li1").next("li"));//查找不到,因为同级中紧邻下一个不是li
console.log($(".li1").next("p"));//查找到紧邻它的下一个同级p元素。
console.log($(".li2").nextAll("li"));//查找到它之后的所有同级元素,组成jQuery兄弟集合。
console.log($(".li2").nextUntil(".li6"));//查找到class为li2的同级之后,直到class=li6为止,不包括li6本身,组成jQuery兄弟集合。
console.log("---------华丽的分割线------------");
console.log($(".li2").nextAll());//从当前查找到最后个同级元素,组成jQuery兄弟集合。
console.log("---------华丽的分割线------------");
console.log($(".li2").prev("li"));//查找不到,因为同级中紧邻上一个不是li
console.log($(".li2").prev("p"));//查找到紧邻它的上一个同级p元素。
console.log($(".li6").prevAll("li"));//查找到它之前的所有同级元素,组成jQuery兄弟集合。
console.log($(".li9").prevUntil(".li6"));//查找到class为li9的同级之前,直到class=li6为止,不包括li6本身,组成jQuery兄弟集合。
console.log($(".li9").prevAll());//从当前查找到最后个同级元素,组成jQuery兄弟集合。
console.log("---------华丽的分割线------------");
console.log($(".li6").siblings("li"));//从当前同时向前向后取出除自身之外同级jQuery兄弟集合
})
</script>
</body>
</html>
结果截图如下: