jQuery :has() Selector

Quiz

The :has() selector is used to select elements that contain at least one element matching the specified selector. It allows you to select elements based on whether they contain other elements that match a specific selector.

Syntax

Following is the syntax of :has() selector in jQuery −

$(":has(selector)")

Parameters

This selector finds elements which contain at least one element that matches the specified selector.

Example 1

In the following example, we are using the :has() selector to select the <div> elements that contains "paragraphs" inside them −

<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>

After executing the above program, the <div> that contains paragraph will be highlighted with a solid red border.

Example 2

In this example, we are selecting all the <li> elements that contain an anchor (<a>) element with the class "external" −

<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>

After executing, the list items that contains an anchor element with the class "external" will be highlighted with yellow background color.

Example 3

Here, we are demonstrating how to select an element that has multiple elements inside of it using the jQuery :has selector −

<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>

After executing, the <div> that contains both <p> and <span> elements will be highlighted with a solid red border.

jquery_ref_selectors.htm

Print Page