Updated April 10, 2023
Description to jQuery offsetParent
The jQuery offsetParent() function is used to gets the closest positioned ancestor element. The jQuery offsetParent() function is a built-in function in jQuery. The jQuery offsetParent() function searches through the DOM tree for the ancestors of these elements and then creates a new jQuery object for it. The jQuery or CSS position properties like absolute, fixed, and relative can be used to position the element.
Syntax:
$( selector ).offsetParent();Parameters:
It does not take any parameters.
Return value:
The return value of this function is the closest positioned parent element.
How to work jQuery offsetParent() function?
The JQuery offsetParent( ) function not accepts any parameter. Suppose we have a div element with relative position property in the HTML page that contains some child elements “p” and “span”. Now we need to get the closest positioned parent element of the p element, so we can use the offsetParent( ) function as “$( “p” ).offsetParent() ;” which return the div with its contents.
Examples for the jQuery offsetParent() function
Example to get the first positioned parent element of the p element –
Example #1
<!doctype html>
<html lang="en">
<head>
<meta charset = "utf-8">
<script src = "https://code.jquery.com/jquery-3.5.0.js"> </script>
<title> This is an example for jQuery offsetParent( ) function </title>
<style>
#p1 {
border : 3px solid red;
}
div {
border: 3px solid blue;
position: relative;
}
</style>
<script>
function disp()
{
$( "#p1" ).offsetParent().css( "color", "red" );
}
</script>
</head>
<body>
<h3> This an example of offsetParent() function : </h3>
<div> This is the div element parent of p element.
<span> This is the span element parent of p element.
<p id = "p1"> This is the p element, child of div element. </p>
</span>
</div>
<button onclick = "disp()"> Click here to change the background color of the first positioned parent element of above p element. </button>
</body>
</body>
</html>An output of the above code is –
Once we click on the button, the output is –
In the above code, there is a “p” element present and the p element parent is a “div” element whose position property is set to relative. Next, when we click on the button it call to the offsetParent() function, the offsetParent() function get the closest positioned parent element of the p element that is div element as “$( “#p1” ).offsetParent().css( “background-color”, “yellow” );”, and apply the format style to “div” element and its content, as we can see in the above output.
Example of jQuery offsetParent() function to get the first positioned parent element of the p element among multiple p elements –
Example #2
<!doctype html>
<html lang="en">
<head>
<meta charset = "utf-8">
<script src = "https://code.jquery.com/jquery-3.5.0.js"> </script>
<title> This is an example for jQuery offsetParent( ) function </title>
<style>
#p1, span {
border : 3px solid red;
}
div {
border: 3px solid blue;
position: relative;
}
</style>
<script>
function disp()
{ $( "#p1" ).offsetParent().css( "background-color", "yellow" );
}
</script>
</head>
<body>
<h3> This an example of offsetParent() function : </h3>
<div>
<p id= "p1"> This is a first paragraph and it is a child of div element. </p>
<span> This is a first span box and it is a child of div element. </span>
</div>
<p id= "p1"> This is a second paragraph and it is a sibling of div element. </p>
<span> This is a second span box and it is a siblingof div element. </span>
<br>
<button onclick = "disp()"> Click here to change the background color of the first positioned parent element of above p element. </button>
</body>
</html>An output of the above code is –
Once we click on the button, the output is –
In the above code, there are two “p” elements present and the first p element parent is the “div” element whose position property is set to relative. Next, when we click on the button it call to the offsetParent() function, the offsetParent() function get the closest positioned parent element of the p element that is div element as “$( “#p1” ).offsetParent().css( “background-color”, “yellow” );”, and apply the format style to “div” element and its content, as we can see in the above output.
Example of jQuery offsetParent() function to get the first positioned parent element of the ul element –
Example #3
<!doctype html>
<html lang="en">
<head>
<meta charset = "utf-8">
<script src = "https://code.jquery.com/jquery-3.5.0.js"> </script>
<title> This is an example for jQuery offsetParent( ) function </title>
<style>
#p1, div {
border : 3px solid red;
}
ul {
border: 3px solid blue;
position: relative;
}
</style>
<script>
function disp()
{
var content = $( "#li1" ).offsetParent().text();
alert(content);
}
</script>
</head>
<body>
<h3> This an example of offsetParent() function : </h3>
<div>
<h3> The List of Vegetables are : </h3>
<ul>
<li id = "li1" > Cabbage </li>
<li> Greens </li>
<li> Cucumber </li>
<li> Bell perpper </li>
<li> Chili pepper </li>
<li> Spinach </li>
<li> Collard green </li>
</ul>
</div>
<button onclick = "disp()"> Click here to get the cotent of the first positioned parent element of above li element. </button>
</body>
</html>An output of the above code is –
Once we click on the button, the output is –
In the above code, there are “li” elements present and the “li” elements parent is “ul” element and whose position property is set to absolute. Next, when we click on the button it calls to the offsetParent() function, the offsetParent() function gets the closest positioned parent element of the li element that is “ul” element as $( “#li1” ).offsetParent();”, and display its content by using the alert, as we can see in the above output.
Conclusion
The jQuery offsetParent() function is a built-in function, which is used to gets the closest positioned ancestor element.
Recommended Articles
This is a guide to jQuery offsetParent. Here we discuss the Introduction, syntax, working of the jQuery offsetParent() function, examples with code implementation. You may also have a look at the following articles to learn more –
