How To Get Parent Element In jQuery
Last Updated : Mar 11, 2024
IN - jQuery | Written & Updated By - Pragati
In this we will show you the solution of how to get parent element in jQuery, to retrieve the parental elements of the an HTML element, one can use specific methods provided by the JavaScript library jQuery.
These methods make it very simple to retrieve an element's direct parent or all parents.
Using jQuery techniques, it is also possible to fetch elements that are between two given elements or that are closest in parentage to the element being picked.
Step By Step Guide On How To Get Parent Element In jQuery :-
In jQuery, how to obtain the parent element
The following list of four techniques is provided for retrieving the parent element.
- parent() method
- parents() method
- parentUntil() method
- closest() method
Let's examine each of the aforementioned techniques in greater detail.
parent() Method
Using the parent() method, one can determine an element's direct parent.
It is a native jQuery function that retrieves the element's immediate parent only one level above the supplied element.
Syntax :-
$(selector).parent(filter)
It is optional to utilise the filter argument, which is used to condense the search for the parent element by giving a selector expression.
The selected elements that need to find their parent are the selector in this case.
Parameter: There is no accepted parameter for it.
Return value: It provides the parent of a chosen items as the return value.
parents() Method
The sole difference between the parents() method and the parent() method is that instead of retrieving the direct parent, the parents() function retrieves all of the parents of the provided element.
Syntax :-
$(selector).parents(filter)
It is optional to utilise the filter argument, which is used to condense the search for the parent element by giving a selector expression.
parentsUntil() Method
The parentUntil() technique is applied to retrieve the parents of the provided elements between two other elements.
Syntax :-
$(selector).parentsUntil(stop,filter)
The filter parameter has the same function as that of parent() and parents() method, however, the stop parameter is used to denote the element at which the search for parent elements should stop.
Both the parameters are optional.
closest() Technique
When using the closest() method, the very first element that satisfies the supplied element is fetched.
Syntax :-
$(selector).closest(filter,context)
<html>
<head>
<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": "green",
"border": "2px solid green"
});
});
</script>
</head>
<body>
<div class="main_div">
<div style="width:500px;">Family (Relation)
<ul>Hii i'm grandparent..
<li>Hii i'm parent...
<span>Hii i'm child...</span>
</li>
</ul>
</div>
</div>
</body>
</html>
- HTML & HEAD tags are used to begin the code.
- Next, we use style to generate the margin blocks.
- Next, we use script to import the Jquery library.
- Following that, we begin our script.
- After that, we run the jQuery code using the ready() method.
- After that, we add border by using the parent technique with span in step 6.
- Finally, we tuck our writing and stars body away.
- Next, we display the parent element using the div class.
- BODY & HTML tags are used to finish our code.
Conclusion :-
Consequently, we were able to understand how to access the parent element with jQuery.
Additionally, we discovered that using jQuery's parent(), parents(), parentUntil(), and closest functions, we could retrieve the parent element ().
The nearest() function retrieves the first element that meets the supplied element, whereas the parent() and parents() methods retrieve the direct parent and all other parents of an element, respectively.
The parentUntil() method discovers parent items between two specified elements.
This manual explains each of these techniques and provides examples that are pertinent to it.
I hope this article on how to get parent element in jQuery helps you and the steps and method mentioned above are easy to follow and implement.
About Pragati
