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 相关文章推荐
极酷的javascirpt,让你随意编辑任何网页
Feb 25 Javascript
javascript实现unicode和字符的互相转换
Jul 18 Javascript
JavaScript lastIndexOf方法入门实例(计算指定字符在字符串中最后一次出现的位置)
Oct 17 Javascript
javascript实现类似百度分享功能的方法
Jul 27 Javascript
Bootstrap编写一个在当前网页弹出可关闭的对话框 非弹窗
Jun 30 Javascript
jQuery实现简单的回到顶部totop功能示例
Oct 16 jQuery
微信小程序实现下拉刷新和轮播图效果
Nov 21 Javascript
详解webpack打包时排除其中一个css、js文件或单独打包一个css、js文件(两种方法)
Oct 26 Javascript
Webpack4+Babel7+ES6兼容IE8的实现
Apr 10 Javascript
Electron-vue开发的客户端支付收款工具的实现
May 24 Javascript
基于Echarts图表在div动态切换时不显示的解决方式
Jul 20 Javascript
vue 全局封装loading加载教程(全局监听)
Nov 05 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中如何判断AJAX提交的数据
2012/02/05 PHP
php图像处理函数大全(推荐收藏)
2013/07/11 PHP
php简单图像创建入门实例
2015/06/10 PHP
PHP里的单例类写法实例
2015/06/25 PHP
php显示页码分页类的封装
2017/06/08 PHP
Laravel Eloquent ORM 多条件查询的例子
2019/10/10 PHP
laravel请求参数校验方法
2019/10/10 PHP
基于jquery的二级联动菜单实现代码
2011/04/25 Javascript
JavaScript中的this关键字使用方法总结
2015/03/13 Javascript
JQuery中DOM实现事件移除的方法
2015/06/13 Javascript
JavaScript中调用函数的4种方式代码实例
2015/07/08 Javascript
JS获取数组最大值、最小值及长度的方法
2015/11/24 Javascript
基于JS实现回到页面顶部的五种写法(从实现到增强)
2016/09/03 Javascript
BootStrap CSS全局样式和表格样式源码解析
2017/01/20 Javascript
webpack进阶——缓存与独立打包的用法
2017/08/02 Javascript
vue组件之Alert的实现代码
2017/10/17 Javascript
jQuery实现的电子时钟效果完整示例
2018/04/28 jQuery
创建Vue项目以及引入Iview的方法示例
2018/12/03 Javascript
python基础教程之python消息摘要算法使用示例
2014/02/10 Python
python使用socket向客户端发送数据的方法
2015/04/29 Python
Python实现基于二叉树存储结构的堆排序算法示例
2017/12/08 Python
在Windows中设置Python环境变量的实例讲解
2018/04/28 Python
对Python3.6 IDLE常用快捷键介绍
2018/07/16 Python
python+opencv边缘提取与各函数参数解析
2020/03/09 Python
python 使用事件对象asyncio.Event来同步协程的操作
2020/05/04 Python
捷克厨房用品购物网站:Tescoma
2018/07/13 全球购物
彪马英国官网:PUMA英国
2019/02/11 全球购物
20年同学聚会感言
2014/02/03 职场文书
财务主管岗位职责
2014/02/28 职场文书
优秀少先队工作者事迹材料
2014/05/13 职场文书
感恩节寄语2015
2015/03/24 职场文书
行政诉讼答辩状
2015/05/21 职场文书
MySQL 全文检索的使用示例
2021/06/07 MySQL
Java实现聊天机器人完善版
2021/07/04 Java/Android
HTTP中的Content-type详解
2022/01/18 HTML / CSS
科普 | 业余无线电知识-波段篇
2022/02/18 无线电