Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Difference Between jQuery offsetParent and jQuery parent Methods
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: 2020-02-14T07:28:47+05:30
285 Views
Advertisements