Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
What is the difference between .closest() and .parents() methods in jQuery?
The jQuery closest() and parents() methods are used to traverse up the DOM tree to find ancestor elements. While both methods search for ancestors, they differ in their search behavior and return values. Let's explore the key differences between these two methods.
jQuery closest() method
The closest() method begins with the current element itself and travels up the DOM tree to find the first ancestor that matches the specified selector. This method returns a jQuery object containing zero or one element.
Key characteristics of closest()
The closest() method ?
- Starts from the current element (includes itself in the search)
- Returns only the first matching ancestor
- Stops searching once a match is found
- Returns a jQuery object with 0 or 1 element
Example
You can try to run the following code to learn how to work with jQuery closest() method ?
<!DOCTYPE html>
<html>
<head>
<style>
.myclass * {
display: block;
border: 2px solid blue;
color: red;
padding: 5px;
margin: 10px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("span").closest("ol").css({"color": "gray", "border": "5px solid maroon"});
});
</script>
</head>
<body class="myclass">body
<div style="width:500px;">div
<ol>ol - This is the third ancestor
<ol>ol - This is the second ancestor
<ol>ol - This is the first ancestor
<li>li - This is the direct parent element
<span>demo</span>
</li>
</ol>
</ol>
</ol>
</div>
</body>
</html>
In this example, only the closest <ol> element (first ancestor) will be styled with gray color and maroon border.
jQuery parents() method
The parents() method begins with the parent element and travels up the DOM tree to find all ancestors that match the specified selector. This method returns a jQuery object containing zero or multiple elements.
Key characteristics of parents()
The parents() method ?
- Starts from the parent element (excludes the current element)
- Returns all matching ancestors
- Continues searching until the document root
- Returns a jQuery object with 0 or more elements
Example
You can try to run the following code to learn how to work with jQuery parents() method ?
<!DOCTYPE html>
<html>
<head>
<style>
.myclass * {
display: block;
border: 5px solid blue;
color: red;
padding: 9px;
margin: 14px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("span").parents().css({"color": "green", "border": "4px solid green"});
});
</script>
</head>
<body class="myclass">body
<div style="width:600px;">div
<ol>ol
<li>li - This is the direct parent element
<span>demo</span>
</li>
</ol>
</div>
</body>
</html>
In this example, all parent elements of the <span> will be styled with green color and border.
Conclusion
The main difference is that closest() returns the first matching ancestor (including the element itself), while parents() returns all matching ancestors (excluding the element itself). Choose closest() when you need the nearest ancestor, and parents() when you need all matching ancestors.
1K+ Views
