jQuery has() method

The jQuery has() method used to return all elements having one or more than one elements inside them that match the given selector. We have to use a comma if we have to select elements, including several elements inside them.

Syntax

The selector in the above syntax is the element to select and return the matching element in it. It can be a tag name, class name or an id of the element.

The has() method accepts a single parameter, which is defined as follows -

element: It is the mandatory parameter that can be an element or a selector expression to match the elements against.

Now, let's understand the working of jQuery has() method by using some illustrations.

Example1

In this example, we are using the has() method to select the div element that has the heading h3 inside it. Here, there are multiple div elements containing different children, but the method will only select the div containing heading h3. We have to click the given button to see the working of the has() method.

<html>

<head>
<title> jQuery has() method </title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
<script>
$(document).ready(function() {
$("button").click(function(){
$("div").has("h3").css({ "border": "4px dashed red", "background-color": "lightblue" });
});
});
</script>
<style>
div{
border: 2px solid black;
margin-top: 10px;
}

</style>
</head>

<body>
<h3> It is an example of using the jQuery has() method </h3>
<p> Click the following button, to select the div element that has heading h3 inside it. </p>
<button> Click me </button>
<div> div1
<p> This is paragraph inside div </p>
</div>
<div> div2
<h3> This is heading h3 inside div </h3>
</div>
<div> div3
<h4> This is heading h4 inside div </h4>
</div>
</body>

</html>

Test it Now

Output

After the execution of the above code, the output will be -

After clicking the given button, the output will be -

Example2

It is another example of using the has() method. Here, we are specifying multiple selectors separated by a comma. The has() method will select the elements given in the selector only when they have a span element inside them.

<html>

<head>
<title> jQuery has() method </title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
<script>
$(document).ready(function() {
$("button").click(function(){
$(" h4, h3, p ").has("span").css({ "border": "4px dashed red", "background-color": "lightblue" });
});
});
</script>
<style>
div{
border: 2px solid black;
margin-top: 10px;
}
div *{
border: 1px solid black;
}
</style>
</head>

<body>
<h3> It is an example of using the jQuery has() method </h3>
<p>Click the following button to select the elements that have "span" element inside them. </p>
<button> Click me </button>
<div> div1
<p> This is <span> paragraph </span> inside div </p>
</div>
<div> div2
<h3> This is heading <span> h3 </span> inside div </h3>
</div>
<div> div3
<h4> This is heading <span> h4 </span> inside div </h4>
</div>
</body>

</html>

Test it Now

Output

After the execution of the above code, the output will be -

After clicking the given button, the output will be -

Example3

In this example, the has() method will return the elements that have multiple elements inside them. The method will return only those p, h5, and h4 elements that has either <span> element with id = "span1" or <b> element.

<html>
<head>
<title> jQuery has() method </title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
<script>
$(document).ready(function() {
$("button").click(function(){
$("p, h5, h4").has(" #span1, b ").css({ "border": "3px dashed red", "background-color": "lightblue" });
});
});
</script>
<style>
div{
border: 2px solid black;
margin-top: 10px;
}
div p, h5, h4{
border: 1px solid black;
}
</style>
</head>

<body>
<h3> It is an example of using the jQuery has() method </h3>
<p> Click the following button to select the elements that have either "span" or "b" elements inside them.
</p>
<button> Click me </button>
<div> div1
<p> This is <span id = "span1"> paragraph </span> that has "span" element inside it. </p>
</div>
<div> div2
<h5> This is heading <b> h5 </b> that has "b" element inside it. </h5>
</div>
<div> div3
<h4> This is heading h4 inside div </h4>
</div>
</body>

</html>

Test it Now

Output

After the execution of the above code, the output will be -