jQuery中的next和nextAll方法

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>

结果:只出现一个后面紧靠的同辈元素。

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>

结果:出现后面所有的同辈元素。


版权声明:本文为myy_llc原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。