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

赞 (0)

相关推荐

  • jQuery中next方法用法实例

    本文实例讲述了jQuery中next方法用法.分享给大家供大家参考.具体分析如下: 这里演示jQuery中next的用法,可取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合. 这个函数只返回后面那个紧邻的同辈元素,而不是后面所有的同辈元素. 可以用一个可选的表达式进行筛选 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1

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

    本文实例讲述了jQuery中nextAll()方法用法.分享给大家供大家参考.具体分析如下: 此方法查找匹配元素之后所有的同辈元素.也可以使用可选的表达式对同辈元素集合进行筛选. 语法结构: 复制代码 代码如下: $(selector).nextAll(expr) 参数列表: 参数 描述 expr 可选.用来过滤的表达式. 实例代码: 实例一: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv=&q

  • jquery next nextAll nextUntil siblings的区别介绍

    next:紧挨着$('')的一个元素 nextAll:在$('')以后的所有的同辈元素 nextUntil:until有直到...之前的意思,所以他表示$('')以后的所有的同辈元素,不过要在nextUntil参数之前,不包括匹配的元素本身 sibings:$('')前后的所有同辈元素 简单理解就是,next就是找他的弟弟/妹妹,nextAll就是找他所有的弟弟/妹妹,nextUntil就是找比他小一定年龄的弟弟/妹妹,siblings就是找他所有的哥哥/姐姐,还有他的所有的弟弟/妹妹.所以同理

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

    本文实例讲述了jQuery中next()方法用法.分享给大家供大家参考.具体分析如下: 此方法获得匹配元素集合中每个元素紧邻的同辈元素. 也可以使用可选的表达式对同辈元素集合进行筛选. 语法结构: 复制代码 代码如下: $(selector).next(expr) 参数列表: 参数 描述 expr 可选.用于筛选的表达式 实例代码: 实例一: 复制代码 代码如下: <!DOCTYPE HTML> <html> <head> <meta charset="

  • jquery 层次选择器siblings与nextAll的区别介绍

    HTML代码: 复制代码 代码如下: <div> <div >1</div> <div class="one"> 2 <div>2_1 <div>2_1_1</div> </div> <div>2_2</div> </div> <div>3</div> <div>4</div> </div> $(

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

    本文实例讲述了jQuery中nextUntil()方法用法.分享给大家供大家参考.具体分析如下: 此函数查找指定元素之后所有的同辈元素,直到遇到匹配的那个元素为止,但不包括此匹配的元素. 语法结构一: 复制代码 代码如下: $(selector).closest(expr, filter) 参数列表: 参数 描述 expr 用于筛选匹配元素的表达式. filter 可选.用于筛选nextUntil()函数通过expr表达式取得的jquery元素集合. 实例代码: 实例一: 复制代码 代码如下:

  • jQuery 遍历-nextUntil()方法以及prevUntil()方法的使用介绍

    jQuery 遍历-nextUntil()方法以及prevUntil()方法的使用介绍

    nextUntil() 获得每个元素所有跟随的同胞元素,当有参数时,则直到遇到该方法的参数所匹配的元素时会停止搜索.返回的新 jQuery 对象包含所有跟随的同胞元素,但不包括被选择器.DOM 节点或已传递的 jQuery 对象匹配的元素.如果没有参数,则会选取所有跟随的同胞元素,此时与.nextAll()方法相同. 语法一: 复制代码 代码如下: .nextUntil(selector,filter) 语法二: 复制代码 代码如下: .nextUntil(element,filter) 详细说

  • Jquery节点遍历next与nextAll方法使用示例

    Jqeruy节点遍历 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title

  • 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(){   //$(

  • JQuery遍历DOM节点的方法

    本文实例讲述了JQuery遍历DOM节点的方法.分享给大家供大家参考.具体分析如下: 本节的核心是介绍JQuery的DOM操作,前面介绍了很多创建.删除.替换等等节点操作.这里介绍如何遍历节点,选中临近节点等的一些方法. children()方法 该方法用于取得匹配元素的子元素集合.根据DOM树的结构,可以知道各个元素之间的关系以及它们子节点的个数. 下面使用children()方法来获取匹配元素的所有子元素的个数. var $body = $("body").children();

  • Jquery遍历Json数据的方法

    本文实例讲述了Jquery遍历Json数据的方法.分享给大家供大家参考.具体如下: <html> <head> <title>jQuery遍历json</title> <script src="js/jquery-1.5.2.min.js" type="text/javascript"></script> </head> <script> var a = { "

  • Jquery中find与each方法用法实例

    本文实例讲述了Jquery中find与each方法用法.分享给大家供大家参考.具体如下: 一.find()方法 jquery选择器非常强大,利用css的命名规约,可以更快更方便的找出想要的元素. 比如: $("#id") $("#"+"id") $(this) $(element) 等等,只要灵活运用,就能爆发出强大的可造型. 但是在实际使用中,仍然觉得有些不足. 如果想要在某个元素下寻找特定的元素,仅仅依靠上面这个方法,就必须对 $("

  • jQuery中ajax的get()方法用法实例

    本文实例讲述了jQuery中ajax的get()方法用法.分享给大家供大家参考.具体分析如下: $.get()通过 HTTP GET请求从服务器上请求数据. 语法结构: 复制代码 代码如下: $.get(url, [data], [callback], [type]); 参数解析: 1.URL:必须,规定请求的URL. 2.data:可选,待发送 Key/value 参数. 3.callback:可选,请求成功后所执行的回调函数. 4.type:可选,返回内容格式,xml, html, scri

  • jQuery中ajax的load()方法用法实例

    本文实例讲述了jQuery中ajax的load()方法用法.分享给大家供大家参考.具体分析如下: 此函数jQuery中简单而功能强大的ajax方法. 它可以从服务器加载内容,然后写入匹配元素. 语法结构: 复制代码 代码如下: $(selector).load(URL,data,callback); 参数解析: 1.selector:一个选择器,可以将内容加载到此选择器匹配的元素中. 2.URL:必须,需要加载的一个url地址. 3.data:可选,与请求一同发送的查询字符串键/值对集合. 4.

  • jQuery中ajax的post()方法用法实例

    本文实例讲述了jQuery中ajax的post()方法用法.分享给大家供大家参考.具体分析如下: $.post() 方法通过HTTP POST请求从服务器上请求数据. 语法结构: 复制代码 代码如下: $.post(URL,data,callback); 参数解析: 1.URL:必须,规定请求的URL. 2.data:可选,规定连同请求发送的数据. 3.callback:可选,规定请求成功后所执行的函数名. 代码实例: 复制代码 代码如下: <!DOCTYPE html> <html&g

  • jquery中animate的stop()方法作用实例分析

    本文实例分析了jquery中animate的stop()方法作用.分享给大家供大家参考.具体分析如下: 这里以一个视频中的代码段告诉你stop()的作用: 代码如下: <style type="text/css"> ul li{ width:50px; height:30px; background:#333; margin-bottom:10px; color:#fff;} </style> <ul id="flyul"> &l

随机推荐