jQuery метод .offsetParent()

Определение и применение

jQuery метод .offsetParent() производит поиск и выбор ближайшего предка элемента, который имеет позиционирование отличное от статичного (значение CSS свойства position которого равно fixed, absolute, или relative).

jQuery синтаксис:

Код

Синтаксис 1.2.6:
// метод не принимает аргументов
$( selector ).offsetParent()

Добавлен в версии jQuery

1.2.6

Пример использования

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Использование метода .offsetParent()</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script>
      $(document).ready(function () {
        $("li.level3")
          .offsetParent() // выбираем ближайшего спозиционированного предка элемента <li> с классом level3
          .css("border", "1px solid green"); // устанавливаем сплошную границу размером 1 пиксель зеленого цвета
        $("li.level2")
          .offsetParent() // выбираем ближайшего спозиционированного предка элемента <li> с классом level2
          .css("border", "1px solid orange"); // устанавливаем сплошную границу размером 1 пиксель оранжевого цвета
      });
    </script>
  </head>
  <body>
    <ul style="position: relative">
      <li>Элемент списка</li>
      <li>Элемент списка</li>
      <li
        >Элемент списка
        <ul style="position: relative">
          <li>Элемент списка</li>
          <li>Элемент списка</li>
          <li class="level2"
            >Элемент списка
            <ul style="position: relative">
              <li>Элемент списка</li>
              <li>Элемент списка</li>
              <li class="level3">Элемент списка</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </body>
</html>

В этом примере с использованием jQuery метода offsetParent() мы выбираем ближайшего спозиционированного предка элемента <li> с классом level3 и элемента <li> с классом level2, и с помощью метода .css() устанавливаем этим элементам сплошную границу размером 1 пиксель зеленого, а во втором случае оранжевого цвета.

Обратите внимание, что по умолчанию все элементы располагаются в потоке документа и имеют статическое позиционирование (значение CSS свойства position равно static). JQuery метод offsetParent() выбирает ближайшего предка, который спозиционирован (значение CSS свойства position отличное от static).

Результат нашего примера:

Пример использования метода .offsetParent()