jQuery :parent 選擇器

jQuery 中的:parent 選擇器用於選擇至少包含一個子元素（元素或文字節點）的元素。換句話說，它過濾匹配的元素集合，只保留那些具有一個或多個任何型別的子節點（包括文字節點）的元素。

語法

以下是 jQuery 中 :parent 選擇器的語法：

$(":parent")

引數

以下是此方法的引數：

":parent" − 此選擇器選擇至少包含一個子元素或文字節點的元素。

示例 1

此示例演示瞭如何使用 :parent 選擇器透過更改背景顏色來突出顯示所有非空

元素：

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("div:parent").css("background-color", "lightblue");
        });
    </script>
</head>
<body>
    <div>Non-empty div with text</div>
    <div><p>Non-empty div with a paragraph</p></div>
    <div>   </div>
    <div></div>
</body>
</html>

執行上述程式後，父 div 元素（至少包含一個子元素或文字節點）將以淺藍色背景顏色突出顯示。

示例 2

此示例使用 :parent 選擇器更改所有非空

元素的字型顏色：

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("p:parent").css("color", "blue");
        });
    </script>
</head>
<body>
    <p>This is a non-empty paragraph.</p>
    <p><span>Another non-empty paragraph with a span.</span></p>
    <p>     </p>
    <p></p>
</body>
</html>

執行上述程式後，父 "p" 元素（至少包含一個子元素或文字節點）將以藍色突出顯示。

jquery_ref_selectors.htm

列印頁面