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 相关文章推荐
跟着Jquery API学Jquery之一 选择器
Apr 07 Javascript
javascript 基础篇2 数据类型,语句,函数
Mar 14 Javascript
js汉字转拼音实现代码
Feb 06 Javascript
详解js中class的多种函数封装方法
Jan 03 Javascript
jQuery基于BootStrap样式实现无限极地区联动
Aug 26 Javascript
jQuery实现简洁的轮播图效果实例
Sep 07 Javascript
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
Oct 26 Javascript
jQuery中库的引用方法
Jan 06 jQuery
OkHttp踩坑随笔为何 response.body().string() 只能调用一次
Jan 08 Javascript
浅析Vue实例以及生命周期
Aug 14 Javascript
JS监听事件的叠加和移除功能
Nov 19 Javascript
解决VUE 在IE下出现ReferenceError: Promise未定义的问题
Nov 07 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 数学运算验证码实现代码
2009/10/11 PHP
php递归实现无限分类生成下拉列表的函数
2010/08/08 PHP
php中数字0和空值的区别分析
2014/06/05 PHP
PHP动态页生成静态页的3种常用方法
2014/11/13 PHP
php强制运行广告的方法
2014/12/01 PHP
Prototype1.5 rc2版指南最后一篇之Position
2007/01/10 Javascript
通用JS事件写法实现代码
2009/01/07 Javascript
JQuery遍历DOM节点的方法
2015/06/11 Javascript
JQuery通过AJAX从后台获取信息显示在表格上并支持行选中
2015/09/15 Javascript
详解jquery事件delegate()的使用方法
2016/01/25 Javascript
深入学习jQuery中的data()
2016/12/22 Javascript
RequireJs的使用详解
2017/02/19 Javascript
12个非常有用的JavaScript技巧
2017/05/17 Javascript
利用vue.js把静态json绑定bootstrap的table方法
2018/08/28 Javascript
elementUI Tree 树形控件的官方使用文档
2019/04/25 Javascript
关于微信小程序map组件z-index的层级问题分析
2019/07/09 Javascript
微信小程序tab切换可滑动切换导航栏跟随滚动实现代码
2019/09/04 Javascript
适合前端Vue开发童鞋的跨平台Weex的使用详解
2019/10/16 Javascript
浅析python协程相关概念
2018/01/20 Python
python的pip安装以及使用教程
2018/09/18 Python
详解Python网络框架Django和Scrapy安装指南
2019/04/01 Python
python实现数据清洗(缺失值与异常值处理)
2019/12/02 Python
python 链接sqlserver 写接口实例
2020/03/11 Python
Python异常处理机制结构实例解析
2020/07/23 Python
Python实现迪杰斯特拉算法过程解析
2020/09/18 Python
HTML5 Video标签的属性、方法和事件汇总介绍
2015/04/24 HTML / CSS
HTML5新增属性data-*和js/jquery之间的交互及注意事项
2017/08/08 HTML / CSS
美国购买体育、音乐会和剧院门票网站:SelectATicket
2019/09/08 全球购物
J2EE模式面试题
2016/10/11 面试题
党员年终民主评议的自我评价
2013/11/05 职场文书
食品行业求职人的自我评价
2014/01/19 职场文书
大学新生军训自我鉴定
2014/09/18 职场文书
防汛工作情况汇报
2014/10/28 职场文书
审美与表现自我评价
2015/03/09 职场文书
心灵点滴观后感
2015/06/02 职场文书
apache基于端口创建虚拟主机的示例
2021/04/22 Servers