通过关系（同级）查找jQuery对象方法，学习笔记

最新推荐文章于 2023-03-03 16:45:55 发布

qianlingvip

最新推荐文章于 2023-03-03 16:45:55 发布

阅读量712

点赞数

本文链接：https://blog.csdn.net/zhangqling/article/details/79944133

版权

<!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>

结果截图如下：