jQuery 兄弟节点 - 菜鸟教程

jQuery遍历 - 兄弟节点

使用jQuery，您可以在DOM树中横向遍历以查找元素的兄弟。

兄弟节点共享同一个父母。

在DOM树中横向遍历

在DOM树中有许多有用的jQuery方法可以横向遍历：

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

jQuery siblings()方法

siblings()方法返回所选元素的所有兄弟元素。

以下示例返回<h2>的所有同级元素：

   
          <head>
               <script type="text/javascript" src="jquery.js"></script>
               <script type="text/javascript">
               $(document).ready(function(){
                  $("h2").siblings();
               });
               </script>
          </head>

尝试一下

您还可以使用可选参数来过滤对兄弟姐妹的搜索。

以下示例返回<h2>的所有兄弟元素<p>元素：

   
          <head>
               <script type="text/javascript" src="jquery.js"></script>
               <script type="text/javascript">
               $(document).ready(function(){
                   $("h2").siblings("p");
               });
               </script>
          </head>

尝试一下

jQuery next()方法

next()方法返回所选元素的下一个兄弟元素。

以下示例返回<h2>的下一个兄弟：

   
               <head>
                    <script type="text/javascript" src="jquery.js"></script>
                    <script type="text/javascript">
                    $(document).ready(function(){
                       $("h2").next();
                    });
                    </script>
               </head>

尝试一下

jQuery nextAll()方法

nextAll()方法返回所选元素的所有下一个兄弟元素。

以下示例返回<h2>的所有下一个兄弟元素：

   
               <head>
                    <script type="text/javascript" src="jquery.js"></script>
                    <script type="text/javascript">
                    $(document).ready(function(){
                         $("h2").nextAll();
                    });
                    </script>
               </head>

尝试一下

jQuery nextUntil()方法

nextUntil()方法返回两个给定参数之间的所有下一个兄弟元素。

以下示例返回<h2>和<h6>元素之间的所有兄弟元素：

   
               <head>
                    <script type="text/javascript" src="jquery.js"></script>
                    <script type="text/javascript">
                    $(document).ready(function(){
                         $("h2").nextUntil("h6");
                    });
                    </script>
               </head>

尝试一下

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

prev()，prevAll()和prevUntil()方法的工作方式与上述方法类似，但功能相反：它们返回先前的兄弟元素（沿DOM树中的兄弟元素向后遍历，而不是向前遍历）。

有关所有jQuery遍历方法的完整概述，请转到我们的jQuery遍历参考手册。