Tutorials

jQuery jQuery.contains() Method

Posted in jQuery Tutorial

Updated on Oct 16, 2024

By Mari Selvan

👁️ 63 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The jQuery .contains() method is a versatile tool for traversing the DOM (Document Object Model) and determining if one element is a descendant of another. It provides a simple and efficient way to check whether a specific DOM element contains another element or not.

In this comprehensive guide, we'll explore the usage of the jQuery .contains() method with detailed examples to illustrate its functionality.

🧠 Understanding jQuery.contains() Method

The .contains() method in jQuery is used to check if a DOM element contains another DOM element. It traverses through the descendants of the specified element and returns true if it finds the target element, otherwise false.

💡 Syntax

The syntax for the jQuery.contains() method is straightforward:

syntax.js

Copied

jQuery.contains(container, contained)

Parameters:

container: The DOM element that may contain the other element.
contained: The DOM element that may be contained within the container.

Return Value:

true: If the container element contains the contained element.
false: If the container element does not contain the contained element.

📝 Example

Basic Usage:

Suppose you have a <div> element with an <h1> element inside it, and you want to check if the <div> contains the <h1> element:
index.html
Copied
```
<div id="container">
  <h1>Hello, World!</h1>
</div>
```
example.js
Copied
```
var container = document.getElementById("container");
var contained = document.querySelector("h1");
var isContained = jQuery.contains(container, contained);
console.log(isContained); // Output: true
```
This will output true to the console since the <div> with the ID container contains the <h1> element.
Checking for Non-existent Element:

If the specified contained element does not exist within the container, the method will return false:
example.js
Copied
```
var container = document.getElementById("container");
var nonExistent = document.createElement("p");
var isContained = jQuery.contains(container, nonExistent);
console.log(isContained); // Output: false
```
In this example, since the <p> element does not exist inside the container <div>, the output will be false.
Practical Application:

You can use the .contains() method to implement conditional logic based on the presence of certain elements within others. For instance, checking if a dropdown menu contains a specific list item before performing an action:
example.js
Copied
```
if (jQuery.contains($("#dropdownMenu")[0], $("#specificListItem")[0])) {
	// Perform action
}
```
This checks if the element with the ID dropdownMenu contains the element with the ID specificListItem before executing the action.

🎉 Conclusion

The jQuery .contains() method offers a straightforward way to determine whether one DOM element is a descendant of another. By leveraging this method, you can efficiently traverse the DOM and implement various functionalities based on element containment.

With the examples provided, you can now confidently integrate the .contains() method into your jQuery projects for enhanced DOM manipulation and interaction.