我正在尝试以下代码:
<!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 or
relative”的父对象。在这里,没有为任何元素声明任何内容,但是警报弹出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]