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

列印頁面