jQuery 遍歷 offsetParent() 方法

jQuery 參考手冊(cè) 遍歷

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

1. 語法

.offsetParent()

如果給定一個(gè)表示 DOM 元素集合的 jQuery 對(duì)象，.offsetParent() 方法允許我們搜索 DOM 樹中元素的祖先，并構(gòu)造一個(gè)由最近的定位祖先元素包圍的 jQuery 對(duì)象。定位元素指的是，元素的 CSS position 屬性設(shè)置為 relative、absolute 或 fixed。在為表演動(dòng)畫計(jì)算偏移或在頁面上放置對(duì)象時(shí)，該信息會(huì)很有用處。

請(qǐng)思考帶有基本嵌套列表的頁面，其中帶有定位元素：

<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>

如果我們從項(xiàng)目 A 開始，我們可以找到其定位祖先元素：

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

這會(huì)改變被定位的項(xiàng)目 II 的背景色。

2. 范例

設(shè)置類名為 item-a 的 li 元素的最近定位父元素的背景色：

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

jQuery 參考手冊(cè) 遍歷