jQuery遍历之next()、nextAll()方法使用实例

 更新时间:2014年11月08日 11:45:48   投稿:junjie  
这篇文章主要介绍了jQuery遍历之next()、nextAll()方法使用实例,本文先是给出了实例代码,然后对代码的作用分析和说明,需要的朋友可以参考下

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内容。???疑惑

相关文章

  • jQuery中insertBefore()方法用法实例

    jQuery中insertBefore()方法用法实例

    这篇文章主要介绍了jQuery中insertBefore()方法用法,实例分析了insertBefore()方法的功能、定义及把匹配的元素插入到另一个指定的元素集合前面的使用技巧,需要的朋友可以参考下
    2015-01-01
  • jQuery插件ajaxFileUpload使用详解

    jQuery插件ajaxFileUpload使用详解

    这篇文章主要为大家详细介绍了jQuery插件ajaxFileUpload使用教程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-01-01
  • 轻松学习jQuery插件EasyUI EasyUI实现拖动基本操作

    轻松学习jQuery插件EasyUI EasyUI实现拖动基本操作

    这篇文章主要帮大家轻松学习jQuery插件EasyUI,并利用EasyUI实现拖动基本操作,文章并提供了一个学校课程表简单实例,感兴趣的小伙伴们可以参考一下
    2015-11-11
  • jQuery实现自动切换播放的经典滑动门效果

    jQuery实现自动切换播放的经典滑动门效果

    这篇文章主要介绍了jQuery实现自动切换播放的经典滑动门效果,可实现tab自动定时切换的功能,涉及jQuery基于定时函数动态操作页面元素的相关技巧,需要的朋友可以参考下
    2015-09-09
  • jquery实现界面无刷新加载登陆注册

    jquery实现界面无刷新加载登陆注册

    这篇文章主要为大家详细介绍了jquery实现界面无刷新加载登陆注册,具有一定的参考价值,感兴趣的朋友可以参考一下
    2016-07-07
  • jQuery实现下拉加载功能实例代码

    jQuery实现下拉加载功能实例代码

    本文通过一段实例代码给大家介绍jquery实现下拉加载功能,代码简单易懂,需要的朋友参考下吧
    2016-04-04
  • jQuery.extend 函数详解

    jQuery.extend 函数详解

    Jquery的扩展方法extend是我们在写插件的过程中常用的方法,该方法有一些重载原型,在此,我们一起去了解了解
    2012-02-02
  • Jquery优化效率 提升性能解决方案

    Jquery优化效率 提升性能解决方案

    jQuery是目前非常流行的Javascript库之一,随着jQuery应用程序的逐渐增多,其性能优化问题是程序员们不可忽视的,我们知道在jQuery中最快的选择器是ID选择器,因为它直接来自于JavaScript的getElementById()方法。
    2010-09-09
  • JQuery Ajax执行跨域请求数据的解决方案

    JQuery Ajax执行跨域请求数据的解决方案

    今天小编就为大家分享一篇关于JQuery Ajax执行跨域请求数据的解决方案,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2018-12-12
  • jQuery EasyUI Tab 选项卡问题小结

    jQuery EasyUI Tab 选项卡问题小结

    这篇文章主要介绍了jQuery EasyUI Tab 选项卡问题小结,在项目开发阶段很多朋友都遇到过此问题,其实解决办法很简单的,下面小编给大家分享下问题原因及解决办法,需要的朋友可以参考下
    2016-08-08

最新评论