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

• <<    .nextUntil()
• .parent()     >>

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

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');
  });
});

Related Tutorials

jQuery Basic Tutorials - Lesson 6 - Tree Traversal

• <<    .nextUntil()
• .parent()     >>