Updated April 10, 2023
Introduction to jQuery Parent
The jQuery UI parent() method used to gets the direct parent of an element and traverse one level up the DOM tree. The jQuery UI parent() method is a built-in method. Sometimes we need to retrieve the information about parents and ancestors of the elements in a program, so jQuery provides parent() method of which traverse one level up the DOM tree and gives the direct parent of a passed element.
Syntax:
The syntax of the JQuery parent() method:
$(selector).parent(filter);Parameters:
- filter: This is an optional parameter, which specifies to filter the parent with it.
- Return value: The return value of this method is parent of an element.
Examples of the jQuery UI parent() Method
Following are the examples are given below:
Example #1 – Method Without Accepting any Parameter
Next we write the html code to understand the jQuery UI parent() method more clearly with the following example, where the parent() method used to get the parent element of the selected element –
Code:
<!doctype html>
<html lang = "en">
<head>
<meta charset="utf-8">
<title> This is an example for jQuery parent() method </title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<style>
.s1 * {
display : block;
border : 2px solid green;
color : red;
padding : 6px;
margin : 12px;
}
</style>
<script>
$(document).ready(function() {
$("p").parent().css({
"color" : "green",
"border" : "2px solid green",
"background" : "yellow"
});
});
</script>
</head>
<body>
<div class = "s1">
<span> This is span great Grandparent.
<h1> This is h1 the grand parent of the selected p element.
<h2> This is h2 the direct parent of the selected p element.
<p> This is the p selected element. </p>
</h2>
</h1>
</span>
</div>
</body>
</html>Output:
Code Explanation: As in the above program the code $(“p”).parent().css({ “color” : “green”, “border” : “2px solid green”, “background” : “yellow” }); is to get the parent element of the p selected element and display in some style as green text color , border 2px solid green color and yellow background. Farther in the code the span tag is the topes tag or great grand parent then h1 is the grand parent and then h2 is the parent of the p element. As the h2 tag is the parent tag of the p selected element that’s why the content of the h2 tag is displaying in that style.
Example #2 – Method for Accepting Parameter
Next example we rewrite the above code where in the jQuery UI parent() method passing the parent filter tag element, as in the below code –
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>This is an example for jQuery parent() method</title>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<style>
.s1 * {
display : block;
border : 2px solid green;
color : red;
padding : 6px;
margin : 12px;
}
</style>
<script>
$(document).ready(function() {
$("p").parent("h2").css({
"color" : "green",
"border" : "2px solid green",
"background" : "yellow"
});
});
</script>
</head>
<body>
<div class = "s1">
<span> This is span great Grandparent.
<h1> This is h1 the grand parent of the selected p element.
<h2> This is h2 the direct parent of the selected p element.
<p> This is the p selected element. </p>
</h2>
</h1>
</span>
</div>
</body>
</html>Output:
Code Explanation: As in the above program the code $(“p”).parent(“h2”).css({ “color” : “green”, “border” : “2px solid green”, “background” : “yellow” }); is to get the parent element of the p selected element filter with “h2” tag element which means if the parent of p element is “h2” then only select the parent tag element otherwise skip. As further in the code the “h2” tag is the parent tag of the p selected element that’s why the content of the h2 tag is displaying in that style.
Example #3 – Method for Accepting Parameter
Next example we rewrite the above code where the jQuery UI parent() method apply to an array where it contain missing elements or a holes in between an elements, as in the below code –
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>This is an example for jQuery parent() method</title>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<style>
.s1 * {
display : block;
border : 2px solid green;
color : red;
padding : 6px;
margin : 12px;
}
</style>
<script>
$(document).ready(function() {
$("p").parent("h1").css({
"color" : "green",
"border" : "2px solid green",
"background" : "yellow"
});
});
</script>
</head>
<body>
<div class = "s1">
<span> This is span great Grandparent.
<h1> This is h1 the grand parent of the selected p element.
<h2> This is h2 the direct parent of the selected p element.
<p> This is the p selected element. </p>
</h2>
</h1>
</span>
</div>
</body>
</html>Output:
Code Explanation: As in the above program the code $(“p”).parent(“h1”).css({ “color” : “green”, “border” : “2px solid green”, “background” : “yellow” }); is to get the parent element of the p selected element filter with “h1” tag element. As the “h1” tag is not the parent tag of the p selected element that’s why the content of the h1 tag is not displaying in that style it just displaying in the red color only.
Recommended Articles
This is a guide to jQuery Parent. Here we also discuss the syntax and parameter of jquery parent along with different examples and its code implementation. you may also have a look at the following articles to learn more –
