jQuery |穿越兄弟姐妹

我们可以在 jQuery 的帮助下遍历Dom 树中的横向并找到一个元素的兄弟元素。
兄弟元素共享同一个父元素。

Traversing Sideways：在 dom 树中横向遍历的 jQuery 方法。

• 兄弟姐妹（）
• next() & nextAll()
• 下一个直到（）
• prev() & prevAll()
• 上一个直到()

1. 兄弟姐妹（）：兄弟姐妹（）是jQuery中的一个内置方法，用于查找所选元素的所有兄弟元素。
   句法：

   $(selector).siblings(function)

2. next() & nextAll()： next() 是 jQuery 中的一个内置函数，用于返回所选元素的下一个兄弟元素。
   句法：

   $(selector).next()

3. nextUntil()： nextUntil() 是 jQuery 中的一个内置方法，用于查找两个给定元素之间的所有兄弟元素。
   句法：
   
   
   

   $(selector1).nextUntil(selector2)

4. prev() & prevAll()： prev() 是 jQuery 中的一个内置函数，用于返回所选元素的前一个兄弟元素。
   句法：

   $(selector).prev()

5. prevUntil()： prevUntil() 是 jQuery 中的一个内置方法，用于查找两个给定元素之间的所有先前同级元素。
   句法：

   $(selector1).nextUntil(selector2)

示例 1：使用“siblings() 方法” 。

  

    
        .block {
            display: block;
            border: 1px solid black;
            padding: 10px;
            color: black;
        }
    
    
  
    
        $(document).ready(function() {
            $("h3").siblings().css({
                "color": "green",
                "border": "3px solid green"
            });
        });
    

  

    
        Geeks
        for
        Geeks
    

  

输出：

示例 2：使用“next() 方法” 。

  

    
        .next * {
            display: block;
            border: 2px solid lightgrey;
            color: black;
            padding: 5px;
            margin: 15px;
        }
    
    
  
    
        $(document).ready(function() {
            $("h3").next().css({
                "color": "black",
                "border": "2px solid green"
            });
        });
    

  

    
        This is parent element !
        This is first paragraph
      
        first span box 
        heading 2 !
        heading 3 !
        This is the second paragraph
          and next sibling to h3 !
    

  

输出：