.offsetParent() JQ Home  <<  Traversal  <<  .offsetParent()

First positioned ancestor element retrieval.

Description

The .offsetParent() method is used to retrieve the closest positioned ancestor element.

  • If an element has a CSS position attribute of absolute, relative or fixed it is a positioned element.
  • This information is useful for calculating offsets for performing effects and placing elements on the page.

Syntax

Signature Description
.offsetParent()Retrieve the descendants of each element within the matched set that matches the specified selector.

Parameters

None.

Return

A jQuery object either containing the element matched or empty.

.offsetParent() Example Traversal  <<  Top

Retrieve the closest positioned ancestor element.

In the example below we get the closest positioned ancestor element of the list item with an id of 'list2', (the position relative list item below) and turn the background colour to yellow.

  1. Things To Do When I Get Up
    1. Put The Kettle On
    2. Put The Teabag in The Cup
    3. Wait for Kettle To Boil
    4. Pour Boiling Water In The Cup (position relative)
      1. Wait for tea to brew
      2. Remove teabag
      3. Pour in milk
        1. Wait for tea to brew
        2. Remove teabag  (id of list1)
  2. Things To Do When I Go To Bed




$(function(){
  $('#btn46').on('click', function() {
    $('#list1').offsetParent()
               .css('backgroundColor', 'yellow');
  });
});


Press the button below to action the above code:

Related Tutorials

jQuery Basic Tutorials - Lesson 6 - Tree Traversal