jQuery中next()方法与nextAll()方法

next()方法:

next([expr]) :取得一个包含匹配的元素集合中每一个元素紧邻的同辈元素的元素集合。(一层)

代码示例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-3.3.1.js"></script>
	</head>
	<body>
		<table><!--创建一个表格-->
			<tr id="thead">
				<th>编号</th>
				<th>姓名</th>
				<th>手机号</th>
				<th>家庭地址</th>
				<th>操作</th>
			</tr>
			<tr>
				<td>1</td>
				<td>Tom</td>
				<td>18838218972</td>
				<td>河南省郑州市高新区</td>
				<td>
					<a href="###">查看</a>
					<a href="###">编辑</a>
					<a href="###">删除</a>
				</td>
			</tr>
			<tr>
				<td>2</td>
				<td>Kate</td>
				<td>13389702861</td>
				<td>吉林省长春市宽平区</td>
				<td>
					<a href="###">查看</a>
					<a href="###">编辑</a>
					<a href="###">删除</a>
				</td>
			</tr>
		</table>
		<script>
			$("#thead").next().each(function(){
				console.log(this);
			});
		</script>
	</body>
</html>

运行结果: 

nextAll()方法:

nextAll([expr])查找当前元素之后所有的同辈元素。(多层)

代码示例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-3.3.1.js"></script>
	</head>
	<body>
		<table>
			<tr id="thead">
				<th>编号</th>
				<th>姓名</th>
				<th>手机号</th>
				<th>家庭地址</th>
				<th>操作</th>
			</tr>
			<tr>
				<td>1</td>
				<td>Tom</td>
				<td>18838218972</td>
				<td>河南省郑州市高新区</td>
				<td>
					<a href="###">查看</a>
					<a href="###">编辑</a>
					<a href="###">删除</a>
				</td>
			</tr>
			<tr>
				<td>2</td>
				<td>Kate</td>
				<td>13389702861</td>
				<td>吉林省长春市宽平区</td>
				<td>
					<a href="###">查看</a>
					<a href="###">编辑</a>
					<a href="###">删除</a>
				</td>
			</tr>
		</table>
		<script>
			$("#thead").nextAll().each(function(){
				console.log(this);
			});
		</script>
	</body>
</html>

运行结果:

 

发布了91 篇原创文章 · 获赞 10 · 访问量 8014

猜你喜欢

转载自blog.csdn.net/Liuxiaoyang1999/article/details/102991169