jQuery parent() & parents() Method
Last Updated :
11 Jul, 2025
The parent() and parents() methods in jQuery are used for traversing the DOM to find parent elements. The parent() method returns the immediate parent, while the parents() method retrieves all ancestor elements. Both methods allow optional filtering by class or ID.
we will learn about the parent() and the parents() methods of jQuery in detail with their practical implementation using the code examples.
jQuery parent() method
The parent() is an inbuilt method in jQuery that is used to find the parent element of the selected element. This parent() method in jQuery traverses a single level up and returns the first parent element of the selected element.
Syntax:
$('element_selector').parent()Parameter: It takes an optional parameter to filter the parent element by passing the class or the ID contained by the parent.
Return value: It returns the parent element of the selected element.
Example: The below example illustrate the use of the parent() method to return the parent of the selected element.
- The parent() method in jQuery selects the immediate parent of the specified element, which in this case is the span element.
- When the parent() method is applied to the span, it targets the <li> element, which is the direct parent of the span.
- The selected parent <li> element then has its styles updated, changing the border to black and the text color to black.
html
<!DOCTYPE html>
<html>
<head>
<title>jQuery parent() method</title>
<style>
.main_div * {
display: block;
border: 1px solid green;
color: green;
padding: 5px;
margin: 15px;
}
</style>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
$(document).ready(function () {
$("span").parent().css({
"color": "#000",
"border": "2px solid #000"
});
});
</script>
</head>
<body>
<div class="main_div">
<div style="width:500px;">
div (Great-Grandparent)
<ul>
This is the grand-parent of the selected span element.!
<li>
This is the parent of the selected span element.!
<span>
This is the span element !!!
</span>
</li>
</ul>
</div>
</div>
</body>
</html>
Output:
jQuery parents() method
The parents() is also an inbuilt method in jQuery that is used to find all the parent elements of the selected element. This parents() method in jQuery traverses all the levels up and returns all parent elements of the selected element.
Syntax:
$('element_selector').parents()Parameters: It accepts an optional parameter to filter the parents by passing their IDs or classes to it.
Return value: It returns all the parents of the selected element.
Example: The below code example will explain the use of the parents() method of jQuery.
- The parents() method selects all ancestors of the span element.
- It applies black border and text color to the <li>, <ul>, and <div> elements.
- This method styles all ancestor elements by traversing up the DOM.
html
<!DOCTYPE html>
<html>
<head>
<title>jQuery parents() method</title>
<style>
.main_body{
display: flex;
align-items: center;
justify-content: center;
}
.main_body * {
display: block;
border: 2px solid green;
color: green;
padding: 5px;
margin: 15px;
}
</style>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
$(document).ready(function () {
$("span").parents().css({
"color": "#000",
"border": "2px solid #000"
});
});
</script>
</head>
<body class="main_body">
<div style="width:500px;">
<!-- Great-Grandparent -->
<div>
<!-- Grandparent -->
<ul>
<!-- Parent -->
<li>
<!-- Selected Span Element -->
<span>This is the selected span element!</span>
</li>
</ul>
</div>
</div>
</body>
</html>
Output:
jQuery is an open-source JavaScript library that simplifies the interactions between an HTML/CSS document, It is widely famous for it's philosophy of “Write less, do more". You can learn jQuery from the ground up by following this jQuery Tutorial and jQuery Examples.
Difference table between jQuery parent() & parents() Method
| Feature | parent() Method | parents() Method |
|---|
| Traversal | Traverses a single level up the DOM tree | Traverses all levels up the DOM tree |
| Return Value | Returns the immediate parent element | Returns all parent elements (ancestors) |
| Filter Parameter | Optional: Can filter by class or ID | Optional: Can filter by class or ID |
| Use Case | When you need to access the immediate parent only | When you need to access all ancestor elements |
| Performance | Slightly faster due to single-level traversal | Slightly slower due to multi-level traversal |
Conclusion
The parent() and parents() methods in jQuery are both useful for traversing the DOM, but they serve different purposes. The parent() method is ideal for scenarios where you need to interact with the immediate parent of an element, while the parents() method is used when you need to traverse through all the ancestors of an element. Understanding the difference between these methods helps you to write more efficient and effective jQuery code.
Similar Reads
jQuery Tutorial jQuery is a lightweight JavaScript library that simplifies the HTML DOM manipulating, event handling, and creating dynamic web experiences. The main purpose of jQuery is to simplify the usage of JavaScript on websites. jQuery achieves this by providing concise, single-line methods for complex JavaSc
8 min read
Getting Started with jQuery jQuery is a fast lightweight, and feature-rich JavaScript library that simplifies many common tasks in web development. It was created by John Resign and first released in 2006. It makes it easier to manipulate HTML documents, handle events, create animations, and interact with DOM(Document Object M
4 min read
jQuery Introduction jQuery is an open-source JavaScript library that simplifies the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM). jQuery simplifies HTML document traversing and manipulation, browser event handling, DOM animations, Ajax interactions, and cross-browser Java
7 min read
jQuery Syntax The jQuery syntax is essential for leveraging its full potential in your web projects. It is used to select elements in HTML and perform actions on those elements.jQuery Syntax$(selector).action()Where - $ - It the the shorthand for jQuery function.(selector) - It defines the HTML element that you w
2 min read
jQuery CDN A Content Delivery Network (CDN) is a system of distributed servers that deliver web content to users based on their geographic location. Including the jQuery CDN in your project can improve the performance, enhance reliability, and simplify maintenance.What is a jQuery CDN?A jQuery CDN is a service
4 min read
jQuery Selectors
JQuery SelectorsWhat is a jQuery Selector?jQuery selectors are functions that allow you to target and select HTML elements in the DOM based on element names, IDs, classes, attributes, and more, facilitating manipulation and interaction. Syntax: $(" ")Note: jQuery selector starts with the dollar sign $, and you encl
5 min read
jQuery * SelectorThe jQuery * selector selects all the elements in the document, including HTML, body, and head. If the * selector is used together with another element then it selects all child elements within the element used. Syntax: $("*")Parameters: *: This parameter is used to select all elements.Example 1: Se
1 min read
jQuery #id SelectorjQuery is an open-source JavaScript library that simplifies the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM), and JavaScript. Elaborating on the terms, it simplifies HTML document traversing and manipulation, browser event handling, DOM animations, Aja
1 min read
jQuery .class SelectorThe jQuery .class selector specifies the class for an element to be selected. It should not begin with a number. It gives styling to several HTML elements. Syntax: $(".class") Parameter: class: This parameter is required to specify the class of the elements to be selected.Example 1: In this example,
1 min read
jQuery Events
jQuery Effects
jQuery HTML/CSS
jQuery Traversing