jQuery中的next方法和nextAll方法

最新推荐文章于 2021-09-03 17:49:14 发布

野菌桃

最新推荐文章于 2021-09-03 17:49:14 发布

阅读量503

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/YJT180/article/details/102991189

版权

jQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

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

next方法虽然与nextAll方法一样取得的都是当前元素的后面同级元素，但有所不同

next方法

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

输出结果为：

可以看到，输出的是id标签为thead的tr标签后的下一个tr及其包含的元素。

nextAll方法

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

输出结果为