What is the difference between jQuery.offsetParent( ) and jQuery.parent() methods in jQuery?

jQueryWeb DevelopmentFront End Technology

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:

Live Demo

<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,

Live Demo

<!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>
raja
Published on 16-Dec-2017 11:22:30
Advertisements