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学习网址备忘
May 29 Javascript
javascript垃圾收集机制与内存泄漏详细解析
Nov 11 Javascript
jquery插件开发之实现jquery手风琴功能分享
Mar 10 Javascript
简单的js图片轮换代码(js图片轮播)
May 06 Javascript
JavaScript程序设计之JS调试
Dec 09 Javascript
json实现添加、遍历与删除属性的方法
Jun 17 Javascript
最全的Javascript编码规范(推荐)
Jun 22 Javascript
Vue.js组件tabs实现选项卡切换效果
Dec 01 Javascript
jquery平滑滚动到顶部插件使用详解
May 08 jQuery
浅谈redux, koa, express 中间件实现对比解析
May 23 Javascript
vue实现一拉到底的滑动验证
Jul 25 Javascript
layer ui 导入文件之前传入数据的实例
Sep 23 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通用检测函数集合
2006/11/25 PHP
php动态实现表格跨行跨列实现代码
2012/11/06 PHP
详解PHP实现异步调用的4种方法
2016/03/14 PHP
PHP使用curl制作简易百度搜索
2016/11/03 PHP
PHPStorm2020.1永久激活及下载更新至2020(推荐)
2020/09/25 PHP
各种常用浏览器getBoundingClientRect的解析
2009/05/21 Javascript
用jQuery打造TabPanel效果代码
2010/05/22 Javascript
基于jQuery实现文本框缩放以及上下移动功能
2014/11/24 Javascript
javascript 原型链维护和继承详解
2014/11/26 Javascript
jquery.mobile 共同布局遇到的问题小结
2015/02/10 Javascript
基于JavaScript实现树形下拉框
2016/08/10 Javascript
深入理解js 中async 函数的含义和用法
2018/05/13 Javascript
Webpack的dll功能使用
2018/06/28 Javascript
JavaScript实现的文本框placeholder提示文字功能示例
2018/07/25 Javascript
对vue中v-if的常见使用方法详解
2018/09/28 Javascript
angularJs复选框checkbox选中进行ng-show显示隐藏的方法
2018/10/08 Javascript
Nodejs封装类似express框架的路由实例详解
2020/01/05 NodeJs
[05:46]2018完美盛典-《同梦共竞》
2018/12/17 DOTA
在 Django/Flask 开发服务器上使用 HTTPS
2014/07/03 Python
Python+Socket实现基于UDP协议的局域网广播功能示例
2017/08/31 Python
Flask解决跨域的问题示例代码
2018/02/12 Python
django与小程序实现登录验证功能的示例代码
2019/02/19 Python
Python栈的实现方法示例【列表、单链表】
2020/02/22 Python
OpenCV Python实现拼图小游戏
2020/03/23 Python
详解PyQt5信号与槽的几种高级玩法
2020/03/24 Python
Jupyter Notebook折叠输出的内容实例
2020/04/22 Python
Selenium python时间控件输入问题解决方案
2020/07/22 Python
python批量生成条形码的示例
2020/10/10 Python
全面解析CSS Media媒体查询使用操作(推荐)
2017/08/15 HTML / CSS
秋季运动会活动方案
2014/02/05 职场文书
会计工作决心书
2014/03/11 职场文书
《风娃娃》教学反思
2014/04/19 职场文书
党员公开承诺书内容
2014/05/20 职场文书
2014年老干部工作总结
2014/11/21 职场文书
给老婆的保证书怎么写
2015/05/08 职场文书
2016优秀班主任个人先进事迹材料
2016/02/26 职场文书