查找DOM节点2

最新推荐文章于 2024-08-08 16:05:12 发布

Happy_syy

最新推荐文章于 2024-08-08 16:05:12 发布

阅读量157

点赞数

本文链接：https://blog.csdn.net/Happy_syy/article/details/103008525

版权

1.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>

得到的结果是第一行，只得到一个运行的结果。
在这里插入图片描述
2.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>

在这里插入图片描述