一、siblings() 方法概述

siblings() 是 jQuery 中用於遍歷 DOM 樹的核心方法之一，用於獲取選定元素的所有同胞元素（即共享相同父元素的元素，不包括選定元素本身）。該方法可以接受一個可選的過濾器參數，用於進一步篩選同胞元素。

語法

$(selector).siblings([filter])
  • selector：必需，選擇器，用於選擇要操作的元素
  • filter：可選，過濾器，用於指定要返回的同胞元素的選擇器

返回值

返回一個 jQuery 對象，包含零個、一個或多個元素。

二、關鍵特點

  1. 不包括選定元素本身
  2. 不提供過濾器時，返回所有同胞元素
  3. 提供過濾器時，只返回匹配該選擇器的同胞元素

三、詳細用法與代碼

1. 基本用法：獲取所有同胞元素

<ul>
  <li class="start">列表項1</li>
  <li>列表項2</li>
  <li>列表項3</li>
  <li>列表項4</li>
  <li>列表項5</li>
</ul>
// 獲取 class="start" 的元素的所有同胞元素
$("li.start").siblings().css({
  "color": "red",
  "border": "2px solid red"
});

效果：所有類為 "start" 的 <li> 元素的同胞元素（即其他4個 <li>）將被設置為紅色字體和紅色邊框。

2. 使用過濾器：獲取特定同胞元素

<ul>
  <li class="start">列表項1</li>
  <li class="selected">列表項2</li>
  <li>列表項3</li>
  <li class="selected">列表項4</li>
  <li>列表項5</li>
</ul>
// 獲取 class="start" 的元素的 class="selected" 的同胞元素
$("li.start").siblings(".selected").css("background-color", "yellow");

效果：只返回類名為 "selected" 的同胞元素，併為它們設置黃色背景。

3. 實際應用：選項卡切換

<body>
  <ul id="menu">
    <li class="tabFocus">家居</li>
    <li>電器</li>
    <li>二手</li>
  </ul>
  <ul id="content">
    <li class="conFocus">我是家居的內容</li>
    <li>歡迎您來到電器城</li>
    <li>二手市場，產品豐富多彩</li>
  </ul>
</body>
$(function() {
  $("#menu li").each(function(index) {
    $(this).click(function() {
      // 移除已選中的樣式
      $("#menu li.tabFocus").removeClass("tabFocus");
      
      // 增加當前選中項的樣式
      $(this).addClass("tabFocus");
      
      // 顯示選項卡對應的內容並隱藏未被選中的內容
      $("#content li:eq(" + index + ")")
        .show()
        .siblings()
        .hide();
    });
  });
});

效果：當點擊任意一個選項卡時：

  1. 移除已選中的選項卡樣式
  2. 為當前點擊的選項卡添加選中樣式
  3. 顯示與當前選項卡對應的選項卡內容
  4. 隱藏其他選項卡內容（使用 .siblings().hide()）

4. 與 next() 和 nextAll() 的區別

// 僅獲取緊接在後的下一個同胞元素
$("li.start").next().css("color", "blue");

// 獲取緊接在後的所有同胞元素
$("li.start").nextAll().css("font-weight", "bold");

// 獲取所有同胞元素（包括前面和後面的）
$("li.start").siblings().css("background", "lightgray");

四、siblings() 方法的使用場景

  1. 選項卡切換：如上所述，這是最常見的應用場景
  2. 菜單導航：在導航菜單中高亮顯示當前選中項
  3. 表格行操作：在表格中操作同一行的其他單元格
  4. 列表項操作：在列表中操作其他列表項