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 的 trim 函数的代码
Aug 13 Javascript
图片连续滚动代码[兼容IE/firefox]
Jun 11 Javascript
jquery鼠标滑过提示title具体实现代码
Aug 06 Javascript
JavaScript预解析及相关技巧分析
Apr 21 Javascript
Google 地图API资料整理及详细介绍
Aug 06 Javascript
Vue.js devtool插件安装后无法使用的解决办法
Nov 27 Javascript
详解.vue文件中style标签的几个标识符
Jul 17 Javascript
webpack4.x下babel的安装、配置及使用详解
Mar 07 Javascript
微信小程序云开发如何使用npm安装依赖
May 18 Javascript
简单了解JavaScript异步
May 23 Javascript
JavaScript实现电灯开关小案例
Mar 30 Javascript
vue 实现超长文本截取,悬浮框提示
Jul 29 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
phpBB BBcode处理的漏洞
2006/10/09 PHP
使用ThinkPHP自带的Http类下载远程图片到本地的实现代码
2011/08/02 PHP
谨慎使用PHP的引用原因分析
2012/09/06 PHP
[企业公众号]升级到[企业微信]之后发送消息失败的解决方法
2017/06/30 PHP
YII2框架中添加自定义模块的方法实例分析
2020/03/18 PHP
javascript 设置文本框中焦点的位置
2009/11/20 Javascript
js触发onchange事件的方法说明
2014/03/08 Javascript
jquery实现标签支持图文排列带上下箭头按钮的选项卡
2015/03/14 Javascript
js+cookies实现悬浮购物车的方法
2015/05/25 Javascript
angularjs创建弹出框实现拖动效果
2020/08/25 Javascript
原生JS实现轮播效果+学前端的感受(防止走火入魔)
2016/08/21 Javascript
深入浅析JS Function()构造函数
2016/08/22 Javascript
bootstrap模态框垂直居中效果
2016/12/03 Javascript
JavaScript中三个等号和两个等号你了解多少
2017/07/04 Javascript
mui back 返回刷新页面的实例
2017/12/06 Javascript
解决vue中无法动态修改jqgrid组件 url地址的问题
2018/03/01 Javascript
微信小程序支付PHP代码
2018/08/23 Javascript
JavaScript 复制对象与Object.assign方法无法实现深复制
2018/11/02 Javascript
基于jquery实现彩色投票进度条代码解析
2020/08/26 jQuery
[02:19]DOTA2女子战队FOX视频专访:希望更多美眉一起加入
2013/10/15 DOTA
Python过滤函数filter()使用自定义函数过滤序列实例
2014/08/26 Python
Python读取本地文件并解析网页元素的方法
2018/05/21 Python
python3实现163邮箱SMTP发送邮件
2018/05/22 Python
Python实现两个list求交集,并集,差集的方法示例
2018/08/02 Python
python 中文件输入输出及os模块对文件系统的操作方法
2018/08/27 Python
python 利用文件锁单例执行脚本的方法
2019/02/19 Python
python3 简单实现组合设计模式
2020/07/02 Python
Book Depository美国:全球领先的专业网上书店之一
2019/08/14 全球购物
添柏岚英国官方网站:Timberland英国
2019/11/28 全球购物
厨师个人自我鉴定范文
2014/04/19 职场文书
运动会标语
2014/06/21 职场文书
2015年暑期社会实践总结
2015/07/13 职场文书
教学工作总结范文5篇
2019/08/19 职场文书
python中的plt.cm.Paired用法说明
2021/05/31 Python
微信小程序APP的事件绑定以及传递参数时的冒泡和捕获
2022/04/19 Javascript
Win11 vmware不兼容怎么办?Win11与VMware虚拟机不兼容的解决方法
2023/01/09 数码科技