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 相关文章推荐
Jquery Ajax学习实例6 向WebService发出请求,返回DataSet(XML) 异步调用
Mar 18 Javascript
jQuery LigerUI 插件介绍及使用之ligerDrag和ligerResizable示例代码打包
Apr 06 Javascript
Node.js 服务器端应用开发框架 -- Hapi.js
Jul 29 Javascript
jQuery制作简洁的多级联动Select下拉框
Dec 23 Javascript
用队列模拟jquery的动画算法实例
Jan 20 Javascript
JavaScript与HTML的结合方法详解
Nov 23 Javascript
详解JavaScript的流程控制语句
Nov 30 Javascript
jQuery动态创建元素以及追加节点的实现方法
Oct 20 Javascript
关于JavaScript中forEach和each用法浅析
Jul 27 Javascript
浅谈angular2 组件的生命周期钩子
Aug 12 Javascript
vue2.0模拟锚点的实例
Mar 14 Javascript
node使用mysql获取数据库数据中文乱码问题的解决
Dec 02 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版微信小店API二次开发及使用示例
2016/11/12 PHP
php表单习惯用的正则表达式
2017/10/11 PHP
php大小写转换函数(strtolower、strtoupper)用法介绍
2017/11/17 PHP
自定义Laravel (monolog)日志位置,并增加请求ID的实现
2019/10/17 PHP
php查看一个变量的占用内存的实例代码
2020/03/29 PHP
Stop SQL Server
2007/06/21 Javascript
JS的递增/递减运算符和带操作的赋值运算符的等价式
2007/12/08 Javascript
IE php关于强制下载文件的代码
2008/08/23 Javascript
jquery根据name属性查找的小例子
2013/11/21 Javascript
js获取指定的cookie的具体实现
2014/02/20 Javascript
JavaScript常用验证函数实例汇总
2014/11/25 Javascript
JavaScript操作XML文件之XML读取方法
2015/06/09 Javascript
浅谈JavaScript中的对象及Promise对象的实现
2015/11/15 Javascript
JavaScript缓冲运动实现方法(2则示例)
2016/01/08 Javascript
Canvas + JavaScript 制作图片粒子效果
2017/02/08 Javascript
超级简易的JS计算器实例讲解(实现加减乘除)
2017/08/08 Javascript
jQuery EasyUI 选项卡面板tabs的使用实例讲解
2017/12/25 jQuery
详解webpack模块化管理和打包工具
2018/04/21 Javascript
React组件重构之嵌套+继承及高阶组件详解
2018/07/19 Javascript
jquery实现简单拖拽效果
2020/07/20 jQuery
浅析使用Python操作文件
2017/07/31 Python
python获取交互式ssh shell的方法
2019/02/14 Python
解决tensorflow由于未初始化变量而导致的错误问题
2020/01/06 Python
Python新手学习标准库模块命名
2020/05/29 Python
Matplotlib自定义坐标轴刻度的实现示例
2020/06/18 Python
使用python-cv2实现视频的分解与合成的示例代码
2020/10/26 Python
Solid & Striped官网:美国泳装品牌
2019/06/19 全球购物
linux面试题参考答案(11)
2016/11/26 面试题
电子商务网站的创业计划书
2014/01/05 职场文书
好书伴我成长演讲稿
2014/05/14 职场文书
超市仓管员岗位职责范本
2014/09/18 职场文书
小学体育组工作总结2015
2015/07/21 职场文书
SpringCloud Alibaba项目实战之nacos-server服务搭建过程
2021/06/21 Java/Android
Java获取e.printStackTrace()打印的信息方式
2021/08/07 Java/Android
Kubernetes部署实例并配置Deployment、网络映射、副本集
2022/04/01 Servers
Redis 限流器
2022/05/15 Redis