jQuery中next方法与nextAll方法

最新推荐文章于 2020-09-03 11:28:57 发布
最新推荐文章于 2020-09-03 11:28:57 发布
阅读量194 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/faithinmyheart/article/details/102991172
版权

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>

结果：返回的是编号为1的<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>

结果：返回id选择器标签下面的所有标签<tr></tr><tr></tr>

离弃。
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JQuery课堂学习笔记
小牛itbull的博客
11-01 690
第1课 JQuery技术简介 page language="java" import="java.util.*" pageEncoding="utf-8"%> <%     String path = request.getContextPath();     String base
Jquery节点遍历next与nextAll方法使用示例
01-19
Jqeruy节点遍历 <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <... <head> <...script type=text/javas
jQuery中的next和nextAll方法
myy_llc的博客
11-09 287
next() ：取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。 nextAll()：查找当前元素之后所有的同辈元素。 next() 方法： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <scr...
jquery的next()方法
menghuanzhiming的博客
06-07 1157
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="application/javascript" src="js/jquery.min.js"></script> <script type="application
jQuery中next和nextAll方法
ANFO的博客
11-09 1194
在jQuery中获取在调用者后面且与调用者同辈的标签的方法有next()和nextAll()两个，二者的区别在于，next()是获取在调用者标签后面第一个与之同辈的标签，nextAll()方法是获取在调用者后面与之同辈的所有标签。 以下是代码示例： 首先使用id选择器获取名为sex的input标签，然后调用next()方法，获取sex标签后面的第一个标签； 然后再用该标签调用nextAll(...
jQuery遍历之next()、nextAll()方法使用实例
xyjikl
12-14 3730
jquery遍历：next()和nextAll()方法。实例如下： 复制代码 代码如下:  $(document).ready(function(){   //$("div").click(function(){alert($(this).next().text());});   //$("div").click(function(){alert($(this).nex
jQuery中nextAll()方法用法实例
12-11
在jQuery库中，`nextAll()`方法是一种非常实用的功能，用于获取匹配元素后的所有同级元素。这个方法允许开发者在DOM树中沿着兄弟元素的方向进行筛选和操作，从而实现更复杂的DOM操作和页面动态效果。 ### 1. `...
jQuery next() 方法
evilcry2012的专栏
09-26 1298
jQuery next() 方法  jQuery 遍历方法 实例 返回带有类名 "start" 的每个 元素的后一个同级元素： $(document).ready(function(){ $("li.start").next().css({"color":"red","border":"2px solid red"}); }); 结果： u
Jquery遍历的next()方法和prev()方法的使用
Smell_rookie的博客
05-31 7011
如果想快速查找指定元素集合中每一个元素紧邻的下一个同辈元素的元素集合，此时可以用next()方法。 $("button:last").click(function() { //找到所有class=item-2的li //然后筛选出第一个，加上蓝色的边 $('.item-1').next(':first').css('border', '1px sol...
jQuery中next方法用法实例
12-10
本文实例讲述了jQuery中next方法用法。分享给大家供大家参考。具体分析如下： 这里演示jQuery中next的用法，可取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。 这个函数只返回后面那个紧邻的同辈元素，而不是后面所有的同辈元素。 可以用一个可选的表达式进行筛选 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/
jquery中的find（）和next（）的用法及区别
热门推荐
梁先森的博客
04-11 1万+
在讲解这两个方法的时候，咱们先弄懂一个概念，什么叫做后代，什么叫做同级 咱们先用一个图片来说一下。 注：该图片取自菜鸟驿站。 &lt;div&gt; 元素是 &lt;ul&gt; 的父元素，同时是其中所有内容的祖先。 &lt;ul&gt; 元素是 &lt;li&gt; 元素的父元素，同时是 &lt;div&gt; 的子元素 两个 &lt;li&gt; 元素是同胞（拥有相同的父元素） ...
jQuery中next（）与nextAll的区别
weixin_45104211的博客
11-09 235
一、总结 next([expr]) ：取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。 nextAll([expr])：查找当前元素之后所有的同辈元素。 二、案例 一、如图所示代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
JQuery next()方法 click方法
weixin_44167504的博客
09-03 945
JQuery next()方法 click方法 改变当前元素的下一个元素的css 实例：点击按钮改变按钮的背景颜色同时改变div的背景颜色 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&
jQuery中的next方法和nextAll方法
low1101的博客
12-01 263
next([expr]) ：取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="...
udp分片报文pcap文件
最新发布
07-18
udp分片报文pcap文件：64kudp大包分成每片658字节总计100片
~相当于jquery中的什么方法
06-09
在jQuery中，可以使用`nextAll()`方法来实现类似的功能。例如，选取第三个`li`元素之后的所有同级`li`元素可以这样写： ```javascript $("li:nth-child(3)").nextAll("li").css("color", "red"); ``` 这样就会将第...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值