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

列印頁面