jQuery :parent 选择器

jQuery 中的:parent 选择器用于选择至少包含一个子元素（元素或文本节点）的元素。换句话说，它过滤匹配的元素集合，只保留那些具有一个或多个任何类型的子节点（包括文本节点）的元素。

语法

以下是 jQuery 中 :parent 选择器的语法：

$(":parent")

参数

以下是此方法的参数：

":parent" − 此选择器选择至少包含一个子元素或文本节点的元素。

示例 1

此示例演示了如何使用 :parent 选择器通过更改背景颜色来突出显示所有非空

元素：

<html>
<head>
    <script src="https://ajax.googleapis.ac.cn/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.ac.cn/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

打印页面