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从头学起第一讲
Jul 04 Javascript
js封装的textarea操作方法集合(兼容很好)
Nov 16 Javascript
window.opener用法和用途实例介绍
Aug 19 Javascript
原生JS操作网页给p元素添加onclick事件及表格隔行变色
Dec 01 Javascript
web前端开发JQuery常用实例代码片段(50个)
Aug 28 Javascript
js实现TAB切换对应不同颜色的代码
Aug 31 Javascript
微信开发 消息推送实现代码
Oct 21 Javascript
easyui datagrid 表格中操作栏 按钮图标不显示的解决方法
Jul 27 Javascript
bootstrap实现二级下拉菜单效果
Nov 23 Javascript
Vue2.0学习系列之项目上线的方法步骤(图文)
Sep 25 Javascript
JS实现的Object数组去重功能示例【数组成员为Object对象】
Feb 01 Javascript
vue实现几秒后跳转新页面代码
Sep 09 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(6) 面向对象
2010/02/16 PHP
PhpMyAdmin出现export.php Missing parameter: what /export_type错误解决方法
2012/08/09 PHP
解析二进制流接口应用实例 pack、unpack、ord 函数使用方法
2013/06/18 PHP
基于php导出到Excel或CSV的详解(附utf8、gbk 编码转换)
2013/06/25 PHP
PHP几个实用自定义函数小结
2016/01/25 PHP
Paypal实现循环扣款(订阅)功能
2017/03/23 PHP
解决laravel 表单提交-POST 异常的问题
2019/10/15 PHP
jQuery 使用个人心得
2009/02/26 Javascript
Javascript 中介者模式实例
2009/12/16 Javascript
关于Aptana Studio生成自动备份文件的解决办法
2009/12/23 Javascript
下拉菜单点击实现连接跳转功能的js代码
2013/05/19 Javascript
方便实用的jQuery checkbox复选框全选功能简单实例
2013/10/09 Javascript
谈一谈js中的执行环境及作用域
2016/03/30 Javascript
jQuery实现的跨容器无缝拖动效果代码
2016/06/21 Javascript
nodejs简单读写excel内容的方法示例
2018/03/16 NodeJs
JavaScript面向对象继承原理与实现方法分析
2018/08/09 Javascript
Vue+axios+WebApi+NPOI导出Excel文件实例方法
2019/06/05 Javascript
使用preload预加载页面资源时注意事项
2020/02/03 Javascript
微信小程序自定义胶囊样式
2020/12/27 Javascript
python集合用法实例分析
2015/05/30 Python
Tornado协程在python2.7如何返回值(实现方法)
2017/06/22 Python
python实现TF-IDF算法解析
2018/01/02 Python
python微信跳一跳系列之棋子定位像素遍历
2018/02/26 Python
使用tensorflow实现线性svm
2018/09/07 Python
Python GUI编程 文本弹窗的实例
2019/06/11 Python
python实现删除列表中某个元素的3种方法
2020/01/15 Python
深入浅析Python代码规范性检测
2020/07/31 Python
关于django python manage.py startapp 应用名出错异常原因解析
2020/12/15 Python
Django扫码抽奖平台的配置过程详解
2021/01/14 Python
突袭HTML5之Javascript API扩展1—Web Worker异步执行及相关概述
2013/01/31 HTML / CSS
详细的大学生创业计划书模板
2014/01/27 职场文书
2014年资料员工作总结
2014/11/18 职场文书
大学生自荐材料范文
2014/12/30 职场文书
教师自荐信范文
2015/03/06 职场文书
2015暑假假期总结
2015/07/13 职场文书
如何用JS实现网页瀑布流布局
2021/04/24 Javascript