.offsetParent()
.offsetParent() 返回: jQuery
描述: 返回最近的被定過位的祖先元素。(祖先元素指該元素的上級元素,即包著它的外層元素)
version added: 1.26.offsetParent()
提供一個代表一系列DOM元素的jQuery對象,
.offsetParent()方法允許我們搜索DOM樹里面該元素的祖先元素,然后構造一個jQuery對象,該jQuery對象包著最近的被定過位的祖先元素。
一個元素被定位的意思是該元素包含一個位置屬性relative, absolute, 或者 fixed.
這對于計算元素的位置很方便,計算位置可以幫助實現(xiàn)動畫或者將元素放在頁面上的特定位置。
例如如果一個頁面包含一個嵌套的列表,里面有一個被定過位的元素:
<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>
如果我們從item A開始,我們可以通過下面的方法找到它的最近的被定過位的祖先元素:
$('li.item-a').offsetParent().css('background-color', 'red');
這將改變list item II的顏色,因為它被定位了。
例子:
尋找item "A."的offsetParent
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.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>