1 min read

jQuery next()

调用 next() 方法的 jQuery 对象分两种,一是单一对象,二是对象集合,下面分开说明:

单一对象

假定以下 HTML 代码:

<div id="wrapper">
   <ul class="nav">
        <li>first line</li>
        <li>second line,将会被下面的 jQuery 语句选中并改变背景颜色</li>
        <li>third line</li>   
        <li>four line</li>    
  </ul>
</div>

CSS 语句为:

#wrapper li{   
    color:white;    
    background:#333;   
}

所用 jQuery 语句如下:

$("#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 代码:

<div id="wrapper">
   <ul class="nav">
        <li>first line</li>
        <li>second line</li>
        <li>third line</li>   
        <li>four line</li>           
    </ul>   
    <div>division after ul.nav as its sibling,</div>
    <ol>     
        <li>有序列表与 jquery prev()</li>     
        <li>有序列表与 jquery prevAll()</li>   
    </ol>
    <div id="jquery_next">
        <p>jquery next() 函数示例</p>  
    </div>
    <p>last sentence</p>
</div>

CSS 语句:

#wrapper li{   
    color:white;
    background:#333;
}

所用 jQuery 语句:

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

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

示例3:jQuery 对象集合使用 next()

nextAll() 同理。

next([selector])

next() 方法默认选取紧跟的后一个同辈元素,不管它是 div 还是 p 还是 ol 又或其他,但如果指定 selector,情况就会变化,比如 selector 指定为 p,但随后紧跟的却是 div,则该语句没有选中任何对象。

其他方法如 prev()prevAll()prev([selector]) 的用法,与上面描述的相近,只不过取得的结果是对象前面的元素,而非后面的元素。

参考

  1. jQuery next() api
报告问题 修订