jQuery siblings() 方法

jQuery 中的 siblings() 方法用於選擇所選元素的所有同級元素。同級元素是指與另一個元素共享相同父元素的元素。此方法允許您在 DOM 元素的同級元素之間向前和向後遍歷。

語法

以下是 jQuery 中 siblings() 方法的語法：

$(selector).siblings(filter)

引數

此方法接受以下可選引數：

filter: 包含選擇器表示式的字串，用於篩選同級元素。

示例 1

在以下示例中，我們演示了 jQuery 中 siblings() 方法的基本用法：

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <script>
    $(document).ready(function(){
        $("li").siblings().css({"color": "#40a944", "border": "2px solid #40a944"});
    });
  </script>
</head>
<body>
  <ul>Parent
    <li>sibling 1</li>
    <li>sibling 2</li>
    <li>sibling 3</li>
    <li>sibling 4</li>
    <li>sibling 5</li>
  </ul>
</body>
</html>

當我們執行上述程式時，siblings() 方法將返回 div 元素的所有同級元素（即所有 li 元素）。

示例 2

這裡，我們返回具有類名“one”的元素，這些元素是具有類名“start”的 li 元素的同級元素：

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <script>
    $(document).ready(function(){
        $("li.start").siblings(".one").css({"color": "#40a944", "border": "2px solid #40a944"});
    });
  </script>
</head>
<body>
  <ul>Parent
    <li class="one">sibling 1</li>
    <li>sibling 2</li>
    <li class="start">sibling 3</li>
    <li>sibling 4</li>
    <li class="one">sibling 5</li>
  </ul>
</body>
</html>

執行上述程式後，它將返回具有類名“start”的 li 元素的同級元素，並帶有綠色邊框和綠色文字顏色。

示例 3

在此示例中，我們選擇 div 元素的所有同級 p 元素：

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <script>
    $(document).ready(function(){
        $("div").siblings("p").css({"color": "#40a944", "border": "2px solid #40a944"});
    });
  </script>
</head>
<body>
  <p>paragraph outside the div.</p>
  <div><b>This is a div element.</b>
    <p>paragraph inside the div.</p>
    <p>paragraph inside the div.</p>
  </div>
  <p>paragraph outside the div.</p>
</body>
</html>

當我們執行上述程式時，siblings() 方法將返回 div 元素的所有同級元素（即 div 元素外部的所有 p 元素）。

jquery_ref_traversing.htm

列印頁面