JQuery遍历（二)

在DOM 树进行水平遍历

siblings()返回被选中元素的同胞元素

next()返回被选元素的下一个同胞元素

nextAll()返回被选元素的所有跟随的同胞元素

nextUntil()返回介于两个给定参数之间的所有跟随的同胞元素。

prev()

prevAll()

prevUntil()

返回的是前面的同胞元素（在 DOM 树中沿着同胞之前元素遍历，而不是之后元素遍历）。

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="../js/jquery.min.js"></script>
		<style type="text/css">
			.siblings * {
				display: block;
				border: 2px solid lightgrey;
				color: lightgrey;
				padding: 5px;
				margin: 15px;
			}
		</style>

		<script type="text/jscript">
			$(document).ready(function() {

				//返回被选中元素的同胞元素
				$("h2").siblings().css({
					"color": "red",
				});

				//使用可选参数来过滤对同胞元素的搜索
				//返回属于 <h2> 的同胞元素的所有 <p> 元素
				$("h2").siblings("p").css({
					"color": "green",
				});

				//返回被选元素的下一个同胞元素
				$("h2").next().css({
					"color": "blue",
				});

				//返回被选元素的所有跟随的同胞元素
				$("h2").nextAll().css({
					"border": "2px solid orange",
				})
				
				//返回介于两个给定参数之间的所有跟随的同胞元素
				$("h3").nextUntil("h6").css({
					"border": "2px solid pink",
				});
				
			});
		</script>
	</head>
	<body>
		<div>div (父元素)
			<p>p</p>
			<span>span</span>
			<h2>h2</h2>
			<h3>h3</h3>
			<h4>h4</h4>
			<h5>h5</h5>
			<h6>h6</h6>
			<p>p</p>
		</div>
	</body>
</html>
posted @ 2020-12-24 11:38  小安不菜  阅读(68)  评论(0)    收藏  举报