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

打印页面