JQ兄弟元素詳解

一、JQ兄弟節點

JQ兄弟節點是指與當前元素有相同父元素的所有子元素，不包括當前元素本身，可以通過 siblings() 方法獲取兄弟節點。

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

上面的代碼中，當按鈕被點擊時，會選取除了當前按鈕之外的全部兄弟節點，並將它們的文字顏色和邊框變為紅色。

二、JQ下一個兄弟元素

JQ下一個兄弟元素是指當前元素之後的第一個兄弟元素，可以通過 next() 方法獲取下一個兄弟元素。

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

上面的代碼中，當按鈕被點擊時，會選取當前按鈕之後的第一個兄弟元素，並將它的文字顏色和邊框變為紅色。

三、JQ兄弟選擇器

JQ兄弟選擇器可以根據元素的相對位置選取元素，格式為 E ~ F，表示選取與元素 E 有相同父元素的 F 元素，且 F 元素在 E 元素之後。

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

上面的代碼中，會選取所有 p 元素之後的第一個 span 元素，並將它們的文字顏色和邊框變為紅色。

四、JQ選擇兄弟元素

JQ選擇兄弟元素可以根據元素的相對位置選取元素，格式為 E + F，表示選取與元素 E 有相同父元素的 F 元素，且 F 元素緊接在 E 元素之後。

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

上面的代碼中，會選取所有 p 元素之後緊接著的一個 span 元素，並將它們的文字顏色和邊框變為紅色。

五、JQ獲取兄弟元素

JQ獲取兄弟元素可以根據條件選取兄弟元素，例如選取指定類名的兄弟元素，格式為 $element.siblings(‘.className’)

$(document).ready(function(){
  $("button").click(function(){
    $(this).siblings('.intro').css({"color": "red", "border": "2px solid red"});
  });
});

上面的代碼中，會選取所有類名為 intro 的兄弟元素，並將它們的文字顏色和邊框變為紅色。

六、JQ獲取兄弟標籤

JQ獲取兄弟標籤可以根據標籤名稱選取兄弟元素，例如選取兄弟的下一個 p 標籤，格式為 $element.nextAll(‘p’)

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

上面的代碼中，會選取當前按鈕之後的全部 p 標籤，並將它們的文字顏色和邊框變為紅色。

七、JQ獲取兄弟節點

JQ獲取兄弟節點可以根據條件選取兄弟節點，例如選取指定類名的兄弟節點，格式為 $element.siblings(‘.className’).contents()

$(document).ready(function(){
  $("button").click(function(){
    $(this).siblings('.intro').contents().unwrap();
  });
});

上面的代碼中，會選取所有類名為 intro 的兄弟節點，並取消它們的包裹元素。

八、JQ獲取下一個兄弟元素

JQ獲取下一個兄弟元素可以根據條件選取下一個兄弟元素，例如選取指定類名的下一個兄弟元素，格式為 $element.nextAll(‘.className’)

$(document).ready(function(){
  $("button").click(function(){
    $(this).nextAll('.intro').css({"color": "red", "border": "2px solid red"});
  });
});

上面的代碼中，會選取當前按鈕之後的全部類名為 intro 的兄弟元素，並將它們的文字顏色和邊框變為紅色。

九、JQ獲取父元素的兄弟元素選取

JQ獲取父元素的兄弟元素選取可以根據條件選取父元素的兄弟元素，例如選取指定類名的父元素的兄弟元素，格式為 $element.parent().siblings(‘.className’)

$(document).ready(function(){
  $("button").click(function(){
    $(this).parent().siblings('.intro').css({"color": "red", "border": "2px solid red"});
  });
});

上面的代碼中，會選取當前按鈕的父元素的全部類名為 intro 的兄弟元素，並將它們的文字顏色和邊框變為紅色。