jQuery 遍历节点之next()方法

JQuery

1个成员

jQuery 遍历节点之next()方法

发表于 2017-01-25 • 2707 次查看

next()方法在jquery中也同样是用来遍历节点的，取得每个匹配的元素的后一个同辈元素的元素集合,可以用一个可选的表达式进行筛选。只有紧邻的同辈元素会被匹配到，而不是后面所有的同辈元素。

next()方法

next([selector])

此方法取得每个匹配的元素的后一个同辈元素的元素集合。
可以用一个可选的表达式进行筛选。只有紧邻的同辈元素会被匹配到，而不是后面所有的同辈元素。

如果想取得每个匹配元素的前一个同辈元素的元素集合，那么请看这篇文章jQuery教程基础篇之DOM操作-遍历节点-prev()方法

nextAll()方法和nextUntil()方法同jquery%e6%95%99%e7%a8%8b%e5%9f%ba%e7%a1%80%e7%af%87%e4%b9%8bdom%e6%93%8d%e4%bd%9c-%e9%81%8d%e5%8e%86%e8%8a%82%e7%82%b9-prevall%e6%96%b9%e6%b3%95/" title="jQuery教程基础篇之DOM操作-遍历节点-prevAll()方法
">prevAll()方法和prevUntil()方法的使用方法差不多，只是获取的元素前者是向后，后者是向前，下面的章节就省略去不说了。

下面来看实例：

代码如下

复制代码

jquery代码：

$('li.item').next().css('background-color', 'red');

结果是两个ul中的<li>li 3</li>的背景都会变成红色。

例1

代码如下

复制代码

<ul>
   <li>jquery 1</li>
   <li class="item">php 2</li>
   <li>css 3</li>
   <li>java 4</li>
</ul>

<input type="button" id="test" value="获取class为'item'的li的后一个元素">
<script>
$("#test").click(function(){
$('li.item').next().css('background-color', 'red');
})
</script>

例2

代码如下

复制代码

最后来看一个.next([selector])带参数的用法：

代码如下	复制代码
<div><span>梦三秋</span></div> <p>你好</p> <p class="selected">jquery太棒了！</p> <script> $("p").next(".selected").css("background", "yellow"); </script>