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 相关文章推荐
javaScript Array(数组)相关方法简述
Jul 25 Javascript
js下通过prototype扩展实现indexOf的代码
Dec 08 Javascript
『jQuery』名称冲突使用noConflict方法解决
Apr 22 Javascript
jquery解析JSON数据示例代码
Mar 17 Javascript
jQuery+CSS实现一个侧滑导航菜单代码
May 09 Javascript
AngularJS 与百度地图的结合实例
Oct 20 Javascript
javascript 中设置window.location.href跳转无效问题解决办法
Feb 09 Javascript
单行 JS 实现移动端金钱格式的输入规则
May 22 Javascript
jQuery实现下拉菜单的实例代码
Jun 19 jQuery
node中modules.exports与exports导出的区别
Jun 08 Javascript
vuex存取值和映射函数使用说明
Jul 24 Javascript
Vue在H5 项目中使用融云进行实时个人单聊通讯
Dec 14 Vue.js
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
DIY一个适配电脑声卡的动圈话筒放大器
2021/03/02 无线电
PHP与javascript的两种交互方式
2006/10/09 PHP
PHP数字格式化
2006/12/06 PHP
php中filter_input函数用法分析
2014/11/15 PHP
PHP工程师VIM配置分享
2015/12/15 PHP
javascript中的关于类型转换的性能优化
2010/12/14 Javascript
SharePoint 客户端对象模型 (一) ECMA Script
2011/05/22 Javascript
jQuery选择器的工作原理和优化分析
2011/07/25 Javascript
关于递归运算的顺序测试代码
2011/11/30 Javascript
JQuery切换显示的效果实例代码
2013/02/27 Javascript
页面js遇到乱码问题的解决方法是和无法转码的情况
2014/04/30 Javascript
网页右下角弹出窗体实现代码
2014/06/05 Javascript
js不间断滚动的简单实现
2016/06/03 Javascript
vue过渡和animate.css结合使用详解
2017/06/14 Javascript
vue表单验证你真的会了吗?vue表单验证(form)validate
2019/04/07 Javascript
vue实现后台管理权限系统及顶栏三级菜单显示功能
2019/06/19 Javascript
JavaScript中window和document用法详解
2020/07/28 Javascript
vue 全局封装loading加载教程(全局监听)
2020/11/05 Javascript
[02:04]2018DOTA2亚洲邀请赛Secret赛前采访
2018/04/03 DOTA
Python实现生成简单的Makefile文件代码示例
2015/03/10 Python
python cs架构实现简单文件传输
2020/03/20 Python
基于Python的Post请求数据爬取的方法详解
2019/06/14 Python
使用python进行广告点击率的预测的实现
2019/07/04 Python
Python3 翻转二叉树的实现
2019/09/30 Python
Django之使用celery和NGINX生成静态页面实现性能优化
2019/10/08 Python
基于python实现FTP文件上传与下载操作(ftp&amp;sftp协议)
2020/04/01 Python
巧用CSS3的calc()宽度计算做响应模式布局的方法
2018/03/22 HTML / CSS
芝加哥牛排公司:Chicago Steak Company
2018/10/31 全球购物
Otticanet美国:最顶尖的世界名牌眼镜, 能得到打折季的价格
2019/03/10 全球购物
房地产销售经理岗位职责
2014/01/01 职场文书
工业自动化专业自荐信范文
2014/04/10 职场文书
2014年效能监察工作总结
2014/11/21 职场文书
2014年保密工作总结
2014/11/22 职场文书
医德医风自我评价2015
2015/03/03 职场文书
无婚姻登记记录证明
2015/06/18 职场文书
Spring Cloud Netflix 套件中的负载均衡组件 Ribbon
2022/04/13 Java/Android