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遍历参考手册。