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>输出结果为
可以看到，输出了thead后的所有tr及其包含的元素。
所以：next方法与nextAll方法的区别就在于前者输出的是一个元素集合，而后者输出的是多个元素集合。
版权声明：本文为YJT180原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。