jQuery 遍历 offsetParent() 方法

JavaScript

实例

设置类名为 item-a 的 li 元素的最近定位父元素的背景色：

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

定义和用法

offsetParent() 获得被定位的最近祖先元素。

语法

.offsetParent()

详细说明

offsetParent属性返回一个对象的引用，这个对象是距离调用offsetParent的元素最近的（在包含层次中最靠近的），并且是已进行过CSS定位的容器元素。 如果这个容器元素未进行CSS定位, 则offsetParent属性的取值为根元素(在标准兼容模式下为html元素；在怪异呈现模式下为body元素)的引用。 当容器元素的style.display 被设置为 "none"时（译注：IE和Opera除外），offsetParent属性 返回 null。定位元素指的是，元素的 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 的背景色。

试一试

[runcode]< !DOCTYPE html>



  • I
  • II
    • A
    • B
      • 1
      • 2
      • 3
    • C
  • III



[/runcode]

jQuery 遍历参考手册