jQuery中next与nextAll区别详解

Z时代
2024-01-10
分类：综合

美女程序员鼓励师

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