夏日博客

A-A+

jQuery next()方法的使用详解

2016年01月11日 前端设计 暂无评论 阅读 5 views 次

next()如果说英文就是下一个的意思，在jquery中next()方法的作用也就差不多下一个节点或下一个对象了，下面我们来看看next()用法。

调用 next() 方法的 jQuery 对象可以分为两种，一是单一的对象，二是对象的集合，下面分开说明：

jQuery 对象单一:

假设以下 HTML 代码：

  1. <div id="wrapper">  
  2.     <ul class="nav">  
  3.         <li>first line</li>  
  4.         <li>second line，将会被下面的 jQuery 语句选中并改变背景颜色</li>  
  5.         <li>third line</li>     
  6.         <li>four line</li>        
  7.     </ul>  
  8. </div>  

CSS 语句为:

  1. #wrapper li{     
  2.     color:white;      
  3.     background:#333;     
  4. }  

所用 jQuery 语句如下：

  1. $("#wrapper li:first-child").next().css("background", "#0175cc");  

使用 $("#wrapper li:first-child") 选择无序列表 ul 中的第一个列表项 li，此时 jQuery 对象单一，因此调用 next() 方法时，取得的是紧跟在它后面的那个同辈 (sibling) 元素，即第二个 li。点击下面的 jsfiddle 链接，运行示例，可以看到，第二个 li 元素的背景色现在已经改变。

示例1：jQuery next()

这样 nextAll() 方法的意思也很明确，它选定第一个 li 后的所有同辈元素。

示例2：jQuery nextAll()

jQuery 对象集合

另一段 HTML 代码：

  1. <div id="wrapper">  
  2.    <ul class="nav">  
  3.         <li>first line</li>  
  4.         <li>second line</li>  
  5.         <li>third line</li>     
  6.         <li>four line</li>             
  7.     </ul>     
  8.     <div>division after ul.nav as its sibling,</div>  
  9.     <ol>       
  10.         <li>有序列表与 jquery prev()</li>       
  11.         <li>有序列表与 jquery prevAll()</li>     
  12.     </ol>  
  13.     <div id="jquery_next">  
  14.         <p>jquery next() 函数示例</p>    
  15.     </div>  
  16.     <p>last sentence</p>  
  17. </div>  

CSS 语句:

  1. #wrapper li{     
  2.     color:white;  
  3.     background:#333;  
  4. }  

所用 jQuery 语句:

  1. $("#wrapper div").next().css("font-size", "25px");  

这里的 jQuery 语句 $("#wrapper div") 选中两个 div，一个紧跟在 ul.nav 后面，一个 id 为 jquery_next，它们是一个对象集合，因此，next() 方法将选中两个 jQuery 对象：第一个 div 后的 ol 序列，第二个 div 后的 p 段落，然后更改其字体大小。

示例3：jQuery展开收缩菜单

脚本部分：

  1. <script type="text/javascript">  
  2.  $(function(){  
  3.      $('dt').toggle(function(){  
  4.    $(this).next().show();  
  5.   },function(){  
  6.    $(this).next().hide();   
  7.   }   
  8.   )   
  9.  })  
  10. </script>  

html部分：

  1. <dl>  
  2.     <dt>  
  3.         <a href="javasrcipt:void(0)">朝阳区</a>  
  4.     </dt>  
  5.     <dd style="display:none;">  
  6.         <ul>  
  7.             <li><a href="">大望路</a></li>  
  8.             <li><a href=""> 大望路</a></li>  
  9.             <li><a href="">大望路</a></li>  
  10.             <li><a href="">大望路</a></li>  
  11.             <li><a href=""> 大望路</a></li>  
  12.             <li><a href="">大望路</a></li>    
  13.             <li><a href="">大望路</a></li>  
  14.             <li><a href=""> 大望路</a></li>  
  15.             <li><a href="">大望路</a></li>    
  16.             <li><a href="">大望路</a></li>  
  17.             <li><a href=""> 大望路</a></li>  
  18.             <li><a href="">大望路</a></li>    
  19.             <li><a href="">大望路</a></li>  
  20.             <li><a href=""> 大望路</a></li>  
  21.             <li><a href="">大望路</a></li>    
  22.             <li><a href="">大望路</a></li>  
  23.             <li><a href=""> 大望路</a></li>  
  24.             <li><a href="">大望路</a></li>                                                                                                        
  25.         </ul>      
  26.     </dd>  
  27. </dl>  

重点是.next()这个方法,取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。这个函数只返回后面那个紧邻的同辈元素，而不是后面所有的同辈元素。可以用一个可选的表达式进行筛选

标签：

给我留言