jQuery 遍历 - 同胞

来源：互联网发布：2017十大网络流行语编辑：程序博客网时间：2024/06/11 07:51

同胞拥有相同的父元素。

通过 jQuery，您能够在 DOM 树中遍历元素的同胞元素。

在 DOM 树中水平遍历

有许多有用的方法让我们在 DOM 树进行水平遍历：

siblings()
next()
nextAll()
nextUntil()
prev()
prevAll()
prevUntil()

jQuery siblings() 方法

siblings() 方法返回被选元素的所有同胞元素。

下面的例子返回 <h2> 的所有同胞元素：

实例

<!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><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script src="jquery.js"></script><style>.siblings *{ display: block;border: 2px solid #CCC ;color: #CCC;padding: 5px;margin: 15px;}</style><script>$(document).ready(function(){  $("h2").siblings().css({"color":"#0F0","border":"2px solid #0F0"});});</script></head><body class="siblings"><div>div (父)  <p>p</p>  <span>span</span>  <h1>h1</h1>  <h2>h2</h2>  <h3>h3</h3>  <p>p</p>  <ul>  ul    <li>li</li>  </ul></div></body></html>

效果图：

您也可以使用可选参数来过滤对同胞元素的搜索。

下面的例子返回属于 <h2> 的同胞元素的所有 <p> 元素：

实例

<script>$(document).ready(function(){  //$("h2").siblings().css({"color":"#0F0","border":"2px solid #0F0"});   $("h2").siblings("p").css({"color":"#0F0","border":"2px solid #0F0"});});</script>

效果图：

jQuery next() 方法

next() 方法返回被选元素的下一个同胞元素。

该方法只返回一个元素。

下面的例子返回 <h2> 的下一个同胞元素：

实例

<script>$(document).ready(function(){  //$("h2").siblings().css({"color":"#0F0","border":"2px solid #0F0"});   //$("h2").siblings("p").css({"color":"#0F0","border":"2px solid #0F0"});   $("h2").next().css({"color":"#0F0","border":"2px solid #0F0"});});</script>

jQuery nextAll() 方法

nextAll() 方法返回被选元素的所有跟随的同胞元素。

下面的例子返回 <h2> 的所有跟随的同胞元素：

实例

<script>$(document).ready(function(){  //$("h2").siblings().css({"color":"#0F0","border":"2px solid #0F0"});   //$("h2").siblings("p").css({"color":"#0F0","border":"2px solid #0F0"});  // $("h2").next().css({"color":"#0F0","border":"2px solid #0F0"});  $("h2").nextAll().css({"color":"#0F0","border":"2px solid #0F0"});});</script>

jQuery nextUntil() 方法

nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。

下面的例子返回介于 <span> 与 <ul> 元素之间的所有同胞元素：

实例

<script>$(document).ready(function(){  //$("h2").siblings().css({"color":"#0F0","border":"2px solid #0F0"});   //$("h2").siblings("p").css({"color":"#0F0","border":"2px solid #0F0"});  // $("h2").next().css({"color":"#0F0","border":"2px solid #0F0"});  //$("h2").nextAll().css({"color":"#0F0","border":"2px solid #0F0"});  $("span").nextUntil("ul").css({"color":"#0F0","border":"2px solid #0F0"});});</script>

jQuery prev(), prevAll() & prevUntil() 方法

prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似，只不过方向相反而已：它们返回的是前面的同胞元素（在 DOM 树中沿着同胞元素向后遍历，而不是向前）。

总结：它们用法相同，所以就直接上js代码了，效果就自己实现下

0 0