.offsetParent()

.offsetParent()Возвращает: jQuery

Описание: Получить ближайшего родительского элемента, который имеет позиционирование.

версия добавлена: 1.2.6.offsetParent()
- Этот метод не принимает никаких аргументов.

Используя объект jQuery, представляющий набор элементов DOM, метод .offsetParent() позволяет нам искать предков этих элементов в дереве DOM и создавать новый объект jQuery, обернутый вокруг ближайшего родителя с позиционированием. Элемент считается позиционированным, если у него есть атрибут CSS position со значением relative, absolute, или fixed. Эта информация полезна для расчета смещений при выполнении анимаций и размещении объектов на странице.

Рассмотрим страницу с простым вложенным списком, содержащим позиционированный элемент:

<ul class="level-1">
  <li class="item-i">I</li>
  <li class="item-ii" style="position: relative;">II
    <ul class="level-2">
      <li class="item-a">A</li>
      <li class="item-b">B
        <ul class="level-3">
          <li class="item-1">1</li>
          <li class="item-2">2</li>
          <li class="item-3">3</li>
        </ul>
      </li>
      <li class="item-c">C</li>
    </ul>
  </li>
  <li class="item-iii">III</li>
</ul>

Если мы начинаем с элемента A, мы можем найти его позиционированного предка:

$( "li.item-a" ).offsetParent().css( "background-color", "red" );

Это изменит цвет пункта списка II, который имеет позиционирование.

Пример:

Найти offsetParent элемента "A".

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>offsetParent demo</title>
  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
 
<ul class="level-1">
  <li class="item-i">I</li>
  <li class="item-ii" style="position: relative;">II
    <ul class="level-2">
      <li class="item-a">A</li>
      <li class="item-b">B
        <ul class="level-3">
          <li class="item-1">1</li>
          <li class="item-2">2</li>
          <li class="item-3">3</li>
        </ul>
      </li>
      <li class="item-c">C</li>
    </ul>
  </li>
  <li class="item-iii">III</li>
</ul>
 
<script>$( "li.item-a" ).offsetParent().css( "background-color", "red" );</script>
 
</body>
</html>

.offsetParent()Возвращает: jQuery

версия добавлена: 1.2.6.offsetParent()

Пример:

Демо: