jQuery 遍历节点之next()方法

来源:互联网 时间:1970-01-01

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()方法 的使用方法差不多,只是获取的元素前者是向后,后者是向前,下面的章节就省略去不说了。

下面来看实例:

 代码如下 复制代码

<UL>

<LI>li 1</LI>

<LI class=item>li 2</LI>

<LI>li 3</LI>

<LI>li 4</LI>

</UL>

<UL>

<LI>li 1</LI>

<LI class=item>li 2</LI>

<LI>li 3</LI> <LI>li 4</LI>
</UL>

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>

<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

 代码如下 复制代码 <style type="text/css">
  div { width:40px; height:40px; margin:10px;
        float:left; border:2px blue solid;
        padding:2px; }
  span { font-size:14px; }
  p { clear:left; margin:10px; }</style><span>
<div id="start">1</div>
<div>2</div>
<div>3<span>span</span></div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</span>
<p><button>点击我获取下一个div</button></p>
<script>
var $curr = $("#start");
$curr.css("background", "#f99");
$("button").click(function () {
 $curr = $curr.next();
 if ($curr.length == 0){
  $curr = $("#start");
 }
 $("div").css("background", "");
 $curr.css("background", "#f99");
});
</script>


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

 

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



相关阅读:
Top