Question

我正在尝试以下代码：

<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("span").click(function(){
    alert($(this).offsetParent().length);
  });
});
</script>
</head>
<body>
<p>If you click on me, I will disappear.</p>
<p><span>Click me away!</span></p>
<p>Click me too!</p>
</body>
</html>

从jQuery文档中，offsetParent()应该返回最接近定位的父级，定位意味着将position明确定义为'static , absolute { {1}} relative`。在这里，没有声明任何元素，但警报弹出1.怎么回事？

Answer 1

首先，让我们看一下返回结果：

[html, prevObject: jQuery.fn.jQuery.init[1], context: span, jquery: "1.9.0", constructor: function, init: function…]

因此，对于$(span).offsetParent()，您会获得HTML元素。

现在让我们看一下offsetParent的实现：

offsetParent: function() {
    return this.map(function() {
        var offsetParent = this.offsetParent || document.documentElement;
        while ( offsetParent && ( !jQuery.nodeName( offsetParent, "html" ) && jQuery.css( offsetParent, "position") === "static" ) ) {
            offsetParent = offsetParent.offsetParent;
        }
        return offsetParent || document.documentElement;
    });
}

从上面的代码中我们看到，如果我们没有定位父offsetParent，则会返回HTML元素。

唯一不好的是，当我查看那些不存在的文档时。

要检查是否有offsetParent实际可以使用：

document.getElementsByTagName('html')[0] === $(elem).offsetParent()[0]

jQuery offsetparent也返回非定位父级

1 个答案: