The parent() is an inbuilt method in jQuery that is used to find the parent element related to the selected element. This parent() method in jQuery traverses a single level up the selected element and returns that element.
Syntax:
$(selector).parent()
Here selector is the selected element whose parent needs to find.
Parameter: It does not accept any parameter.
Return value: It returns the parent of the selected elements.
jQuery code to show the working of this function:
Example:
html
<!DOCTYPE html>
<html>
<head>
<style>
.main_div * {
display: block;
border: 1px solid green;
color: green;
padding: 5px;
margin: 15px;
}
</style>
<script src=
</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;">
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: In the above code, only the parent element of the selected element is get deep green colour.
The parents() is an inbuilt method in jQuery that is used to find all the parent elements related to the selected element. This parent () method in jQuery traverses all the levels up the selected element and returns all elements.
Syntax:
$(selector).parents()
Here selector is the selected element that all parents need to find.
Parameters: It does not accept any parameter.
Return value: It returns all the parents of the selected element.
jQuery code to show the working of this function:
Example:
html
<!DOCTYPE html>
<html>
<head>
<style>
.main_body * {
display: block;
border: 2px solid green;
color: green;
padding: 5px;
margin: 15px;
}
</style>
<script src=
</script>
<script>
$(document).ready(function () {
$("span").parents().css({
"color": "green",
"border": "2px solid green"
});
});
</script>
</head>
<body class="main_body">
<div style="width:500px;">
This is the great grand parent of the selected span element.!
<ul>
This is the grand parent of the selected span element.!
<li>
This is the parent of the selected element.!
<span>
This is the selected span element.!
</span>
</li>
</ul>
</div>
</body>
</html>
|
Output: In the above code, all the parent element of the selected is shown by the deep green color.
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.
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!