jQuery遍历之next()、nextAll()方法使用实例


Posted in Javascript onNovember 08, 2014

jquery遍历:next()和nextAll()方法。实例如下:

<html>

<head>

<script type="text/javascript" src="jquery-1.8.2.min.js"></script>

<script type="text/javascript">

 $(document).ready(function(){

  //$("div").click(function(){alert($(this).next().text());});

  //$("div").click(function(){alert($(this).nextAll().text());});

  $("div").click(function(){alert($(this).nextAll("div").text());});

 });

</script>

<style type="text/css">

div{width:300px;height:30px;background:green;margin-top:10px;}

</style>

</head>

<body>

<div id="uu">您好,<font color="blue">美女</font></div>

<div>hello,world</div>

<div>美女,亲一下</div>

<p>我是p标签</p>

<div><span>我很帅,有图有真相</span></div>

<p>我也是p标签</p>

</body>

</html>

说明:

(1)next()方法:是指获得匹配元素的相邻同同辈元素(即下一个同辈元素),注意,同辈元素并不是标签相同的元素,而是指该元素闭合后的下一个元素,如实例中的”<div>美女,亲一下</div>“,div闭合后的下一个元素为<p>。

(2)如果next()加上参数,即next("div"),如果下一个相邻元素不是div,则为空,即一定是相邻的。

(3)nextAll()方法:指获得匹配元素之后所有的同辈元素。它同样可以加上参数,nextAll("p")或nextAll("div")等等。

(4)有些奇怪的是,如果是这样的代码:

$("div").click(function(){alert($(this).nextAll("div").html());});

它并不能获得所有的html内容,而只是获得下一个同辈元素的html内容。???疑惑

Javascript 相关文章推荐
js 为label标签和div标签赋值的方法
Aug 08 Javascript
js验证输入是否为手机号码或电话号码示例
Dec 30 Javascript
使用AngularJS来实现HTML页面嵌套的方法
Jun 17 Javascript
js+html5实现复制文字按钮
Jul 15 Javascript
Vue 2.5.2下axios + express 本地请求404的解决方法
Feb 21 Javascript
使用vue-aplayer插件时出现的问题的解决
Mar 02 Javascript
分享5个顶级的JavaScript Ajax组件库
Sep 16 Javascript
详解puppeteer使用代理
Dec 27 Javascript
vue实现商城秒杀倒计时功能
Dec 12 Javascript
vue props 单项数据流实例分享
Feb 16 Javascript
Vue Cli3 打包配置并自动忽略console.log语句的方法
Apr 23 Javascript
JavaScript parseInt0.0000005打印5原理解析
Jul 23 Javascript
jQuery遍历对象、数组、集合实例
Nov 08 #Javascript
JavaScript中具名函数的多种调用方式总结
Nov 08 #Javascript
JavaScript中使用typeof运算符需要注意的几个坑
Nov 08 #Javascript
JavaScript中判断整数的多种方法总结
Nov 08 #Javascript
JavaScript中判断整字类型最简洁的实现方法
Nov 08 #Javascript
JavaScript中的索引数组、关联数组和静态数组、动态数组讲解
Nov 08 #Javascript
JavaScript函数模式详解
Nov 07 #Javascript
You might like
一个捕获函数输出的函数
2007/02/14 PHP
php文件服务实现虚拟挂载其他目录示例
2014/04/17 PHP
PHP中数据库单例模式的实现代码分享
2014/08/21 PHP
php实现简单加入购物车功能
2017/03/07 PHP
PHP删除字符串中非字母数字字符方法总结
2019/01/20 PHP
iframe自适应宽度、高度 ie6 7 8,firefox 3.86下测试通过
2010/07/29 Javascript
JavaScript 高级篇之DOM文档,简单封装及调用、动态添加、删除样式(六)
2012/04/07 Javascript
使用apply方法处理数组的三个技巧[译]
2012/09/20 Javascript
Javascript 中 null、NaN和undefined的区别总结
2013/04/10 Javascript
jQuery可见性过滤器:hidden和:visibility用法实例
2015/06/24 Javascript
jQuery实现图片文字淡入淡出效果
2015/12/21 Javascript
angular实现form验证实例代码
2017/01/17 Javascript
JavaScript 函数节流详解及方法总结
2017/02/09 Javascript
浅谈Vue.js
2017/03/02 Javascript
vue addRoutes实现动态权限路由菜单的示例
2018/05/15 Javascript
vue实现的树形结构加多选框示例
2019/02/02 Javascript
vue计算属性get和set用法示例
2019/02/08 Javascript
jQuery实现input[type=file]多图预览上传删除等功能
2019/08/02 jQuery
JS实现动态倒计时功能(天数、时、分、秒)
2019/12/12 Javascript
js实现随机抽奖
2020/03/19 Javascript
[47:55]Ti4第二日主赛事败者组 NaVi vs EG 1
2014/07/20 DOTA
[02:41]DOTA2亚洲邀请赛小组赛第三日 赛事回顾
2015/02/01 DOTA
[40:05]LGD vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
基于python实现上传文件到OSS代码实例
2020/05/09 Python
德国咖啡批发商:Coffeefair
2019/08/26 全球购物
中科软测试工程师面试题
2012/06/16 面试题
小学教师节活动方案
2014/01/31 职场文书
环保宣传标语
2014/06/12 职场文书
车辆工程专业求职信
2014/06/14 职场文书
青年志愿者活动方案
2014/08/17 职场文书
借名购房协议书范本
2014/10/06 职场文书
物业工程部岗位职责
2015/02/11 职场文书
小学生班干部竞选稿
2015/11/20 职场文书
创业计划书之孕婴生活馆
2019/11/11 职场文书
Pytorch使用shuffle打乱数据的操作
2021/05/20 Python
Python中异常处理用法
2021/11/27 Python