# .offsetParent()

所属分类：偏移 | 遍历 > 树遍历 英文文档：.offsetParent()

## .offsetParent()返回: jQuery

描述: 取得离指定元素最近的含有定位信息的祖先元素。含有定位信息的元素指的是，CSS 的 position 属性是 relative, absolute, 或 fixed 的元素。

- #### 添加的版本: 1.2.6.offsetParent()

  - 这个方法不接受任何参数。

如果提供一个代表一系列DOM元素的jQuery对象， `.offsetParent()`方法允许我们搜索DOM树里面该元素的祖先元素，然后构建一个新的jQuery对象，该jQuery对象包着最近的被定过位的祖先元素。 一个元素被定位的意思是该元素包含一个位置属性`relative`, `absolute`, 或者 `fixed`. 这对于计算元素的位置很方便，计算位置可以帮助实现动画或者将元素放在页面上的特定位置。

例如如果一个页面包含一个嵌套的列表，里面有一个被定过位的元素：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
    <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开始，我们可以通过下面的方法找到它的最近的被定过位的祖先元素：

1 |
    $('li.item-a').offsetParent().css('background-color', 'red');

这将改变列表项 II的颜色，因为它被定位了。

## 例子:

#### 寻找item "A"的offsetParent

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
    <!DOCTYPE html><html><head>  <script src="https://code.jquery.com/jquery-latest.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>

#### Demo: