jQuery 元素 ~ 兄弟选择器

jQuery 中的元素 ~ 兄弟选择器用于选择指定元素之后的所有兄弟元素。"~" 选择器与特定的元素选择器一起使用，以指定其后的兄弟元素。

语法

以下是 jQuery 元素 ~ 兄弟选择器的语法：

("element ~ siblings")

参数

以下是上述语法的描述：

element: 指定选择其后兄弟元素的元素。
siblings: `element` 的兄弟元素。

示例 1

在下面的示例中，我们使用 jQuery 的“元素 ~ 兄弟选择器”来选择 <h2> 元素之后所有 <p> 元素的兄弟元素：

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            // Select all siblings of 'p' elements that come after the first 'p'
            $("h2 ~ p").css("background-color", "yellow");
        });
    </script>
</head>
<body>
    <h2>Heading element.</h2>
    <p>This is the second paragraph.</p>
    <p>This is the third paragraph.</p>
    <p>This is the fourth paragraph.</p>
</body>
</html>

执行上述程序后，<h2> 的 <p> 兄弟元素将被选中，并以黄色背景突出显示。

示例 2

这里，我们选择所有作为 <div> 元素兄弟元素的 <p> 元素：

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("div ~ p").css("background-color", "yellow");
        });
    </script>
</head>
<body>
    <div style="border: 2px solid black;">Div element.</div>
    <h3>Heading element.</h3>
    <p>This is the third paragraph.</p>
    <p>This is the fourth paragraph.</p>
    <h3>Heading element.</h3>
</body>
</html>

即使父元素 <div> 之后有标题元素，也只会选择 <p> 元素。

jquery_ref_selectors.htm

打印页面