Описание: Получает ближайшего предка элемента, который позиционирован.
.offsetParent()
Добавлена в версию: 1.2.6
Данный объект 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>
Если мы начнем с пункта А, мы можем найти его позиционированного предка:
$('li.item-a').offsetParent().css('background-color', 'red');
Это изменит цвет элемента списка II, который позиционирован.
Примеры
Находит offsetParent пункта "A."Полный код:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" language="javascript"> $(document).ready(function(){ $('li.item-a').offsetParent().css('background-color', 'red'); }); </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> </body> </html>
Была ли эта информация полезной?
