知识点六：jQuery遍历-同胞Siblings(), next(), nextAll()

最新推荐文章于 2019-10-02 21:04:22 发布

流浪蓝

最新推荐文章于 2019-10-02 21:04:22 发布

阅读量494

点赞数

分类专栏：前端文章标签： jquery 遍历

本文链接：https://blog.csdn.net/qq_35932345/article/details/53857255

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

jQuery遍历-同胞

从同级元素之后遍历添加Siblings(),next(),nextAll(),nextUtil(),

在同级元素之前面进行遍历添加prev(),prevAll(),prevUntil()

详细内容如下：

1、siblings() 方法

siblings() 方法返回被选元素的所有同胞元素。

代码如下：

<!DOCTYPE html>
<html>
<head>
<style>
.siblings *
{ 
	display: block;
	border: 2px solid lightgrey;
	color: lightgrey;
	padding: 5px;
	margin: 15px;
}
</style>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
	$(document).ready(function(){
 		 $("h2").siblings("p").css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body class="siblings">

<div>div (父)
  	<p>p</p>
  	<span>span</span>
  	<h2>h2</h2>
  	<h3>h3</h3>
	  <p>p</p>
</div>

</body>
</html>

2、next()方法，用来查找同一级元素的下一个标签

代码如下：

<!DOCTYPE html>
<html>
<head>
<style>
.siblings *
{ 
	display: block;
	border: 2px solid lightgrey;
	color: lightgrey;
	padding: 5px;
	margin: 15px;
}
</style>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
	$(document).ready(function(){
  	$("h2").next().css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body class="siblings">

<div>div (父)
  	<p>p</p>
  	<span>span</span>
  	<h2>h2</h2>
  	<h3>h3</h3>
  	<p>p</p>
</div>

</body>
</html>

nextAll(),找到同级标签以下的所有标签

代码如下：

<!DOCTYPE html>
<html>
<head>
<style>
.siblings *
{ 
	display: block;
	border: 2px solid lightgrey;
	color: lightgrey;
	padding: 5px;
	margin: 15px;
}
</style>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
	$(document).ready(function(){
 	 $("h2").nextAll().css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body class="siblings">

<div>div (父)
 	 <p>p</p>
  	<span>span</span>
  	<h2>h2</h2>
  	<h3>h3</h3>
 	 <p>p</p>
</div>

</body>
</html>