jQuery中next与nextAll区别详解-Python学习网

jQuery中next与nextAll区别详解

宋雪维

2021-02-01 11:08:572320浏览 · 0收藏 · 0评论

在jQuery水平遍历dom方法中，next()方法和nextAll()方法使用很相似，但是也有区别。next()方法获取被选中元素的下一个且同级元素节点，返回同辈标签中的下一个标签（是一个值），而获取被选中元素的下边所有同级元素节点，返回的是同辈间下面的所有的标签（是多个值）。

1、定义不同

next()方法取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合；

nextAll()方法查找当前元素之后所有的同辈元素。

2、获取元素节点数量不同

next()方法只是同辈的下一级，获取被选中元素的下一个且同级元素节点；

nextAll()方法是同辈的下面的所有的，获取被选中元素的下边所有同级元素节点。

3、返回值不同

next()方法返回同辈标签中的下一个标签（是一个值）；

nextAll()方法返回的是同辈间下面的所有的标签（是多个值）。

4、代码区分

<!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>
	    </tr>
	    <tr>
	        <td>1</td>
	    </tr>
	    <tr>
		<td>2</td>
	    </tr>
	</table>
	<script>
	    $("#thead").next().each(function(){
		console.log(this);
	    });
	    console.log("————分割线————")
	    $("#thead").nextAll().each(function(){
		console.log(this);
	    });
	</script>
    </body>
</html>

以上就是jQuery中next与nextAll区别详解，小编还想补充的是next()方法除了上述作用，还可以用于添加条件哟~更多JavaScript学习推荐：JavaScript教程。