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编程起步(第五课)
Feb 27 Javascript
JavaScript 输入框内容格式验证代码
Feb 11 Javascript
javascript开发随笔一 preventDefault的必要
Nov 25 Javascript
JQuery入门——移除绑定事件unbind方法概述及应用
Feb 05 Javascript
JS完成代码前最好对其做5件事
Apr 07 Javascript
js捕获鼠标滚轮事件代码
Dec 16 Javascript
javascript的propertyIsEnumerable()方法使用介绍
Apr 09 Javascript
学习JavaScript设计模式(封装)
Nov 26 Javascript
微信小程序 Record API详解及实例代码
Sep 30 Javascript
基于JS设计12306登录页面
Dec 28 Javascript
基于jQuery插件jqzoom实现的图片放大镜效果示例
Jan 23 Javascript
详解vue组件基础
May 04 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一些服务器端特性的配置加强php的安全
2006/10/09 PHP
php中文本数据翻页(留言本翻页)
2006/10/09 PHP
PHP 增加了对 .ZIP 文件的读取功能
2006/10/09 PHP
php判断用户是否关注微信公众号
2016/07/22 PHP
php5.2的curl-bug 服务器被php进程卡死问题排查
2016/09/19 PHP
PHP实现文件上传操作和封装
2020/03/04 PHP
Javascript-Mozilla和IE中的一个函数直接量的问题
2007/01/09 Javascript
ExtJS PropertyGrid中使用Combobox选择值问题
2010/06/13 Javascript
High Performance JavaScript(高性能JavaScript)读书笔记分析
2011/05/05 Javascript
javascript右下角弹层及自动隐藏(自己编写)
2013/11/20 Javascript
如何通过javascript操作web控件的自定义属性
2013/11/25 Javascript
深入理解JavaScript是如何实现继承的
2013/12/12 Javascript
JS获取select的value和text值的简单实例
2014/02/26 Javascript
JavaScript 事件对象介绍
2015/04/13 Javascript
JavaScript ParseFloat()方法
2015/12/18 Javascript
jquery.cookie.js用法实例详解
2015/12/25 Javascript
jquery对象访问是什么及使用方法介绍
2016/05/03 Javascript
微信小程序 input输入框详解及简单实例
2017/01/10 Javascript
JavaScript中利用构造器函数模拟类的方法
2017/02/16 Javascript
Vue监听数组变化源码解析
2017/03/09 Javascript
jQuery实现图片上传预览效果功能完整实例【测试可用】
2018/05/28 jQuery
layui radio性别单选框赋值方法
2018/08/15 Javascript
javascrit中undefined和null的区别详解
2019/04/07 Javascript
基于jQuery拖拽事件的封装
2020/11/29 jQuery
解决Matplotlib图表不能在Pycharm中显示的问题
2018/05/24 Python
浅谈Python基础—判断和循环
2019/03/22 Python
纯python进行矩阵的相乘运算的方法示例
2019/07/17 Python
Python图像处理库PIL中图像格式转换的实现
2020/02/26 Python
python实现时间序列自相关图(acf)、偏自相关图(pacf)教程
2020/06/03 Python
Blancsom美国/加拿大:服装和生活用品供应商
2018/07/27 全球购物
Yves Rocher捷克官方网站:植物化妆品的创造者
2019/07/31 全球购物
大学生应聘推荐信范文
2013/11/19 职场文书
装饰工程师岗位职责
2014/06/08 职场文书
入党团支部推荐意见
2015/06/02 职场文书
运动会加油稿
2015/07/22 职场文书
经典格言警句:没有热忱,世间便无进步
2019/11/13 职场文书