JQuery獲取兄弟元素詳解

一、.siblings()方法

.siblings()方法返回與選定元素在同一層級的所有兄弟元素。示例如下：

  
  $(document).ready(function(){
    $("h1").siblings().css({"color": "red", "border": "2px solid red"});
  });
  

上述代碼會選中所有h1元素的兄弟元素，並將它們的顏色以及邊框樣式改成紅色。

.siblings(selector)方法可以通過指定選擇器來篩選兄弟元素。示例如下：

  
  $(document).ready(function(){
    $("h1").siblings("p").css({"color": "red", "border": "2px solid red"});
  });
  

這段代碼會選中所有h1元素下的p元素，並將它們的樣式改為紅色。

二、.next()和.prev()方法

.next()方法返回選中元素緊接著的下一個同級元素，而.prev()方法返回選中元素緊接著的上一個同級元素。

  
  $(document).ready(function(){
    $("h1").next().css({"color": "red", "border": "2px solid red"});
  });
  

上述代碼會選中所有h1元素下的第一個同級元素，並將它的顏色以及邊框樣式改成紅色。

.next(selector)和.prev(selector)方法可以通過指定選擇器來篩選下一個/上一個同級元素。

  
  $(document).ready(function(){
    $("h1").next("p").css({"color": "red", "border": "2px solid red"});
  });
  

這段代碼會選中所有h1元素下的第一個p元素，並將它們的樣式改為紅色。

三、.nextAll()和.prevAll()方法

.nextAll()方法返回選中元素之後所有的同級元素，.prevAll()方法返回選中元素之前的所有同級元素。

  
  $(document).ready(function(){
    $("h1").nextAll().css({"color": "red", "border": "2px solid red"});
  });
  

上述代碼選中所有h1元素之後的同級元素，並將它們的樣式改為紅色。

.nextAll(selector)和.prevAll(selector)方法可以通過指定選擇器來篩選下一個/上一個同級元素。

  
  $(document).ready(function(){
    $("h1").nextAll("p").css({"color": "red", "border": "2px solid red"});
  });
  

這段代碼會選中所有h1元素之後的p元素，並將它們的樣式改為紅色。

四、.nextUntil()和.prevUntil()方法

.nextUntil()方法返回選中元素之後，一直到指定元素之前的所有同級元素。.prevUntil()和.prevAll()方法類似。

  
  $(document).ready(function(){
    $("h1").nextUntil("ul").css({"color": "red", "border": "2px solid red"});
  });
  

這段代碼會選中所有h1元素之後，到最近的ul元素之前的所有同級元素，並將它們的樣式改為紅色。

五、小結

通過上述五個方法，我們可以方便地獲取兄弟元素。.siblings()方法適用於所有兄弟元素的情況，.next()和.prev()方法適用於緊接著的下一個或上一個元素，.nextAll()和.prevAll()方法適用於一段區間內的所有同級元素，.nextUntil()和.prevUntil()方法適用於指定區間內的所有同級元素。