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 相关文章推荐
XML+XSL 与 HTML 两种方案的结合
Apr 22 Javascript
打豆豆小游戏 用javascript编写的[打豆豆]小游戏
Jan 08 Javascript
jquery复选框checkbox实现删除前判断
Apr 20 Javascript
js实现ArrayList功能附实例代码
Oct 29 Javascript
jQuery Mobile中的button按钮组件基础使用教程
May 23 Javascript
JS未跨域操作iframe里的DOM
Jun 01 Javascript
vue+iview写个弹框的示例代码
Dec 05 Javascript
Puppeteer环境搭建的详细步骤
Sep 21 Javascript
Node.js使用supervisor进行开发中调试的方法
Mar 26 Javascript
发布订阅模式在vue中的实际运用实例详解
Jun 09 Javascript
Vue快速实现通用表单验证的示例代码
Jan 09 Javascript
JavaScript 防篡改对象的用法示例
Apr 24 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 构造函数construct的前下划线是双的_
2009/12/08 PHP
Discuz批量替换帖子内容的方法(使用SQL更新数据库)
2014/06/23 PHP
PHP中构造函数和析构函数解析
2014/10/10 PHP
跨浏览器PHP下载文件名中的中文乱码问题解决方法
2015/03/05 PHP
php获取微信共享收货地址的方法
2017/12/21 PHP
用js+xml自动生成表格的东西
2006/12/21 Javascript
各浏览器对link标签onload/onreadystatechange事件支持的差异分析
2011/04/27 Javascript
jQuery.each()用法分享
2012/07/31 Javascript
自己实现ajax封装示例分享
2014/04/01 Javascript
angularjs实现与服务器交互分享
2014/06/24 Javascript
使用百度地图api实现根据地址查询经纬度
2014/12/11 Javascript
详细分析JavaScript函数定义
2015/07/16 Javascript
跟我学习javascript的this关键字
2020/05/28 Javascript
HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)
2016/01/26 Javascript
使用Promise解决多层异步调用的简单学习心得
2016/05/17 Javascript
Javascript基础回顾之(二) js作用域
2017/01/31 Javascript
jQuery表格(Table)基本操作实例分析
2017/03/10 Javascript
Webpack如何引入bootstrap的方法
2017/06/17 Javascript
vue.js项目nginx部署教程
2018/04/05 Javascript
[01:34]完美“圣”典宣传片震撼发布,12.17与你不见不散
2016/12/16 DOTA
解决pycharm 误删掉项目文件的处理方法
2018/10/22 Python
使用python实现抓取腾讯视频所有电影的爬虫
2019/04/15 Python
django框架实现模板中获取request 的各种信息示例
2019/07/01 Python
Python 存取npy格式数据实例
2020/07/01 Python
Python基于xlutils修改表格内容过程解析
2020/07/28 Python
Python3爬虫mitmproxy的安装步骤
2020/07/29 Python
关于css兼容性问题及一些常见问题汇总
2016/05/03 HTML / CSS
世界上最大的餐具公司:Oneida
2016/12/17 全球购物
I.T集团香港官方商城:ITeSHOP.com Hong Kong
2019/02/15 全球购物
sort命令的作用和用法
2012/11/04 面试题
毕业求职自荐信格式是什么
2013/11/19 职场文书
服装创业计划书范文
2014/02/05 职场文书
暑期政治学习心得体会
2014/09/02 职场文书
护士医德医风自我评价
2014/09/15 职场文书
2014年发展党员工作总结
2014/11/12 职场文书
用Python仅20行代码编写一个简单的端口扫描器
2022/04/08 Python