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 相关文章推荐
网站页面自动跳转实现方法PHP、JSP(上)
Aug 01 Javascript
jQuery中document与window以及load与ready 区别详解
Dec 29 Javascript
jquery+CSS实现的水平布局多级网页菜单效果
Aug 24 Javascript
纯js代码实现简单计算器
Dec 02 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(二)
Dec 10 Javascript
jQuery EasyUI学习教程之datagrid点击列表头排序
Jul 09 Javascript
js学习总结之DOM2兼容处理this问题的解决方法
Jul 27 Javascript
Angularjs cookie 操作实例详解
Sep 27 Javascript
JavaScript 下载svg图片为png格式
Jun 21 Javascript
vue 本地环境跨域请求proxyTable的方法
Sep 19 Javascript
使用Angular material主题定义自己的组件库的配色体系
Sep 04 Javascript
js实现菜单跳转效果
Dec 11 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在线生成ico文件的代码
2007/10/09 PHP
php intval的测试代码发现问题
2008/07/27 PHP
解析php获取字符串的编码格式的方法(函数)
2013/06/21 PHP
浅谈javascript 面向对象编程
2009/10/28 Javascript
onsubmit阻止form表单提交与onclick的相关操作
2010/09/03 Javascript
js 判断文件类型并控制表单提交示例代码
2013/11/14 Javascript
JS基于myFocus库实现各种功能的tab选项卡切换效果
2015/09/19 Javascript
JS实现网站菜单拖拽移位效果的方法
2015/09/24 Javascript
IScroll5 中文API参数说明和调用方法
2016/05/21 Javascript
JS实现预加载视频音频/视频获取截图(返回canvas截图)
2017/10/09 Javascript
详解nodejs通过响应回写的方式渲染页面资源
2018/04/07 NodeJs
angular6.x中ngTemplateOutlet指令的使用示例
2018/08/09 Javascript
在vue中使用v-bind:class的选项卡方法
2018/09/27 Javascript
基于Koa2写个脚手架模拟接口服务的方法
2018/11/27 Javascript
Vue 幸运大转盘实现思路详解
2019/05/06 Javascript
详解Django之admin组件的使用和源码剖析
2018/05/04 Python
使用Flask集成bootstrap的方法
2018/07/24 Python
Pandas删除数据的几种情况(小结)
2019/06/21 Python
python pandas生成时间列表
2019/06/29 Python
python卸载后再次安装遇到的问题解决
2019/07/10 Python
python单线程下实现多个socket并发过程详解
2019/07/27 Python
在macOS上搭建python环境的实现方法
2019/08/13 Python
python自动化工具之pywinauto实例详解
2019/08/26 Python
Django框架静态文件处理、中间件、上传文件操作实例详解
2020/02/29 Python
Django Model中字段(field)的各种选项说明
2020/05/19 Python
python中温度单位转换的实例方法
2020/12/27 Python
html5 canvas-2.用canvas制作一个猜字母的小游戏
2013/01/07 HTML / CSS
Lentiamo荷兰:在线订购隐形眼镜、隐形眼镜液和太阳镜
2019/10/25 全球购物
应届毕业生应聘自荐信范文
2014/02/26 职场文书
励志演讲稿200字
2014/08/21 职场文书
务虚会发言材料
2014/12/25 职场文书
先进典型事迹材料
2014/12/29 职场文书
员工评语范文
2014/12/31 职场文书
拔河比赛队名及霸气口号
2015/12/24 职场文书
Python基础之常用库常用方法整理
2021/04/30 Python
QT连接MYSQL数据库的详细步骤
2021/07/07 MySQL