返回介绍

.offsetParent()

发布于 2017-09-11 字数2675 浏览 874 评论 0

所属分类:偏移 | 遍历 > 树遍历

.offsetParent()返回: jQuery

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

  • 添加的版本: 1.2.6.offsetParent()

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

如果提供一个代表一系列DOM元素的jQuery对象,
.offsetParent()方法允许我们搜索DOM树里面该元素的祖先元素,然后构建一个新的jQuery对象,该jQuery对象包着最近的被定过位的祖先元素。
一个元素被定位的意思是该元素包含一个位置属性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的颜色,因为它被定位了。

例子:

寻找item “A”的offsetParent

<!DOCTYPE html>
<html>
<head>
  <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.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>

您暂时不能评论!

管理员开启了需要登录才能够评论,你可以免费注册一个本站的账号。

还没有评论!

目前还没有任何评论,快来抢沙发吧!