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 变量基础知识
Nov 07 Javascript
js获取单元格自定义属性值的代码(IE/Firefox)
Apr 05 Javascript
iframe的onload在Chrome/Opera中执行两次Bug的解决方法
Mar 17 Javascript
JS delegate与live浅析
Dec 21 Javascript
Easyui Treegrid改变默认图标的方法
Apr 29 Javascript
jQuery validate插件功能与用法详解
Dec 15 Javascript
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
Oct 19 jQuery
ES6解构赋值实例详解
Oct 31 Javascript
基于Vue2的独立构建与运行时构建的差别(详解)
Dec 06 Javascript
详解如何在微信小程序开发中正确的使用vant ui组件
Sep 13 Javascript
JavaScript+HTML5 canvas实现放大镜效果完整示例
May 15 Javascript
vue+express+jwt持久化登录的方法
Jun 14 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 json_encode()函数返回json数据实例代码
2014/10/10 PHP
深入探究PHP的多进程编程方法
2015/08/18 PHP
PHP观察者模式示例【Laravel框架中有用到】
2018/06/15 PHP
Aster vs Newbee BO3 第二场2.18
2021/03/10 DOTA
jquery 双色表格实现代码
2009/12/08 Javascript
使用SyntaxHighlighter实现HTML高亮显示代码的方法
2010/02/04 Javascript
Javascript中产生固定结果的函数优化技巧
2013/01/16 Javascript
jquery 文本上下无缝滚动,鼠标放上去就停止 小例子
2013/06/05 Javascript
js实现可拖动DIV的方法
2013/12/17 Javascript
js中substr,substring,indexOf,lastIndexOf的用法小结
2013/12/27 Javascript
js获取客户端网卡的IP地址、MAC地址
2014/03/26 Javascript
javascript实现多级联动下拉菜单的方法
2015/02/06 Javascript
深入理解JavaScript系列(33):设计模式之策略模式详解
2015/03/03 Javascript
js获取时间函数及扩展函数的方法
2016/10/30 Javascript
Vue-Router进阶之滚动行为详解
2017/09/13 Javascript
浅谈vue,angular,react数据双向绑定原理分析
2017/11/28 Javascript
浅谈实现vue2.0响应式的基本思路
2018/02/13 Javascript
详解vuex commit保存数据技巧
2018/12/25 Javascript
js 闭包深入理解与实例分析
2020/03/19 Javascript
js绘制一条直线并旋转45度
2020/08/21 Javascript
[18:32]DOTA2 HEROS教学视频教你分分钟做大人-谜团
2014/06/12 DOTA
python topN 取最大的N个数或最小的N个数方法
2018/06/04 Python
详解如何在cmd命令窗口中搭建简单的python开发环境
2019/08/29 Python
python集合的新增元素方法整理
2020/12/07 Python
女性时尚在线:IVRose
2019/02/23 全球购物
施华洛世奇匈牙利官网:SWAROVSKI匈牙利
2019/07/06 全球购物
网上开商店的创业计划书
2014/01/19 职场文书
教师学习培训邀请函
2014/02/04 职场文书
花店创业计划书范文
2014/02/07 职场文书
文明餐桌行动实施方案
2014/02/19 职场文书
《音乐之都维也纳》教学反思
2014/04/16 职场文书
公司授权委托书格式范文
2014/10/02 职场文书
环卫个人总结
2015/03/03 职场文书
限期整改通知书
2015/04/22 职场文书
JavaScript高级程序设计之基本引用类型
2021/11/17 Javascript
JavaScript ES6的函数拓展
2022/01/18 Javascript