jQuery :has() 选择器

:has() 选择器用于选择包含至少一个与指定选择器匹配的元素的元素。它允许您根据元素是否包含与特定选择器匹配的其他元素来选择元素。

语法

以下是 jQuery 中 :has() 选择器的语法：

$(":has(selector)")

参数

此选择器查找包含至少一个与指定选择器匹配的元素的元素。

示例 1

在以下示例中，我们使用 :has() 选择器来选择包含“段落”的 <div> 元素：

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("div:has(p)").css("border", "2px solid red");
        });
    </script>
    <style>
        div {
            margin: 10px;
            padding: 10px;
            background-color: #f0f0f0;
        }
        p {
            margin: 0;
        }
    </style>
</head>
<body>
    <div>
        <p>This div contains a paragraph.</p>
    </div>
    <div>
        <span>Span element here.</span>
    </div>
    <div>
        <p>Another paragraph.</p>
        <span>And a span element.</span>
    </div>
</body>
</html>

执行上述程序后，包含段落的 <div> 将以实线红色边框突出显示。

示例 2

在此示例中，我们选择所有包含具有类“external”的锚 (<a>) 元素的 <li> 元素：

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("li:has(a.external)").css("background-color", "yellow");
        });
    </script>
    <style>
        ul {
            list-style-type: none;
            padding: 0;
        }
    </style>
</head>
<body>
    <ul>
        <li><a href="#">Regular link</a></li>
        <li><a href="#" class="external">External link</a></li>
        <li><a href="#">Regular link</a></li>
        <li><a href="#" class="external">Another external link</a></li>
    </ul>
</body>
</html>

执行后，包含具有类“external”的锚元素的列表项将以黄色背景颜色突出显示。

示例 3

在这里，我们演示了如何使用 jQuery :has 选择器来选择包含多个元素的元素：

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("div:has(p, span)").css("border", "2px solid red");
        });
    </script>
    <style>
        div {
            margin: 10px;
            padding: 10px;
            background-color: #f0f0f0;
        }
        p {
            margin: 0;
        }
    </style>
</head>
<body>
    <div>
        <p>This div contains a paragraph element.
            <span>This div contains a span element.</span>
        </p>
    </div>
    <div>This div does not contain any p or span elements.</div>
</body>
</html>

执行后，包含 <p> 和 <span> 元素的 <div> 将以实线红色边框突出显示。

jquery_ref_selectors.htm

打印页面