Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
What is the difference between jQuery.offsetParent( ) and jQuery.parent() methods in jQuery?
jQuery.offsetParent()
The offsetParent() method returns a jQuery collection with the positioned parent of the first matched element.
This is the first parent of the element that has position (as in relative or absolute). This method only works with visible elements.
Example
You can try to run the following code to learn how to work with jQuery.offsetParent() in jQuery:
<html>
<head>
<title>jQuery offsetParent() method</title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("div").click(function () {
var offset = $(this).offsetParent();
$("#lresult").html("left offset: <span>" +
offset.offset().left + "</span>.");
$("#tresult").html("top offset: <span>" +
offset.offset().top + "</span>.");
});
});
</script>
<style>
div {
width:60px;
height:60px;
margin:5px;
float:left;
}
</style>
</head>
<body>
<p>Click on any square:</p>
<span id = "lresult"> </span>
<span id = "tresult"> </span>
<div style = "background-color:blue;">
<div style = "background-color:pink;"></div>
</div>
<div style = "background-color:#123456;">
<div style = "background-color:#f11;"></div>
</div>
</body>
</html>jQuery.parent()
The jQuery.parent() method is used to return the direct parent element of the selected element. It has only one parameter,
| S.No | Parameter | Description |
| 1 | filter | To set a selector expression for parent search. This parameter is optional. |
Example
You can try to run the following code to learn how to work with jQuery.parent() function,
<!DOCTYPE html>
<html>
<head>
<style>
.myclass * {
display: block;
border: 2px solid blue;
color: red;
padding: 10px;
margin: 8px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("span").parent().css({"color": "green", "border": "3px solid yellow"});
});
</script>
</head>
<body class="myclass">body
<div style="width:500px;">div
<ol>ol
<li>li - This is the direct parent element
<span>span</span>
</li>
</ol>
</div>
</body>
</html>
Updated on: 14-Feb-2020
195 Views
Advertisements