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中的public和private对象,即static修饰符
Jan 18 Javascript
深入理解javascript的执行顺序
Apr 04 Javascript
原生js和jQuery写的网页选项卡特效对比
Apr 27 Javascript
JavaScript中Window对象的属性及事件
Dec 25 Javascript
浅析JS运动
Dec 28 Javascript
基于JavaScript实现数码时钟效果
Mar 30 Javascript
js如何编写简单的ajax方法库
Aug 02 Javascript
ReactNative Image组件使用详解
Aug 07 Javascript
浅谈HTTP 缓存的那些事儿
Oct 17 Javascript
跨域请求两种方法 jsonp和cors的实现
Nov 11 Javascript
Weex开发之地图篇的具体使用
Oct 16 Javascript
JS实现百度搜索框
Feb 25 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
PHP生成静态页面详解
2006/11/19 PHP
深思 PHP 数组遍历的差异(array_diff 的实现)
2008/03/23 PHP
PHP的基本常识小结
2013/07/05 PHP
CentOS 6.3下安装PHP xcache扩展模块笔记
2014/09/10 PHP
用Laravel Sms实现laravel短信验证码的发送的实现
2018/11/29 PHP
discuz论坛更换域名,详细文件修改步骤
2020/12/09 PHP
使用prototype.js进行异步操作
2007/02/07 Javascript
js优化针对IE6.0起作用(详细整理)
2012/12/25 Javascript
jquery如何判断表格同一列不同行input数据是否重复
2014/05/14 Javascript
JavaScript原生对象之Number对象的属性和方法详解
2015/03/13 Javascript
jquery操作select元素和option的实例代码
2016/02/03 Javascript
JS实现弹出居中的模式窗口示例
2016/06/20 Javascript
AngularJs基本特性解析(一)
2016/07/21 Javascript
js实现碰撞检测特效代码分享
2016/10/16 Javascript
Vue.js使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用
2017/05/10 Javascript
基于iScroll实现内容滚动效果
2018/03/21 Javascript
云服务器部署Node.js项目的方法步骤(小白系列)
2020/03/23 Javascript
js在HTML的三种引用方式详解
2020/08/29 Javascript
[05:53]完美世界携手游戏风云打造 卡尔工作室观战系统篇
2013/04/22 DOTA
[54:33]2018DOTA2亚洲邀请赛小组赛 A组加赛 Liquid vs Optic
2018/04/03 DOTA
Python3实现生成随机密码的方法
2014/08/23 Python
Python实现的快速排序算法详解
2017/08/01 Python
Python列表删除的三种方法代码分享
2017/10/31 Python
Python Gluon参数和模块命名操作教程
2019/12/18 Python
解决pyCharm中 module 调用失败的问题
2020/02/12 Python
Python+OpenCV图像处理——实现直线检测
2020/10/23 Python
2014年商场超市庆元旦活动方案
2014/02/14 职场文书
应聘文员自荐信范文
2014/03/11 职场文书
yy婚礼主持词
2014/03/14 职场文书
经济国贸专业求职信
2014/06/18 职场文书
上市公司财务总监岗位职责
2015/04/03 职场文书
详解Redis瘦身指南
2021/05/26 Redis
Pyqt5将多个类组合在一个界面显示的完整示例
2021/09/04 Python
SpringBoot集成MongoDB实现文件上传的步骤
2022/04/18 MongoDB
Windows server 2012搭建FTP服务器
2022/04/29 Servers
javascript中Set、Map、WeakSet、WeakMap区别
2022/12/24 Javascript