在jQuery中获取元素相对于其偏移父元素的正确偏移量

时间:2010-08-23 21:22:56

标签: jquery jquery-ui

我有以下html结构:

<div id="main" style="position: relative; width: 900px;">
    <div id="wrapper" style="padding: 40px;">
        <div id="newdiv" style="position: absolute;">
            Some content
        </div>
        <div id="existingdiv">
            Some existing content
        </div>
    </div>
</div>

我可能错过了一些css,但基本上结果是main有一个固定宽度,包装器是相同的宽度减去填充,existingdiv与包装器的宽度相同,而newdiv具有其中内容的宽度。我正在处理一个插件,所以html / css可能会有所不同,但我对这个特殊情况有困难。

newsiv由js插入,我试图将其右侧与existingdiv的右侧对齐。 newdiv中的内容会发生变化,因此通过设置newdiv的“正确”属性来实现这一点是有意义的。然而,确定这应该是什么价值证明是困难的。

使用jQuery的position()方法返回正确的顶部和左侧(40px)偏移量。我找不到使用jQuery的方法来返回offsetParent的整个宽度。我不得不恢复常规的javascript:

var el = document.getElementById('existingdiv');
var right = el.offsetParent.offsetWidth - el.offsetWidth - el.offsetLeft;
$('#newdiv').css('right', right);

我也尝试过使用jQuery UI的扩展位置方法,但是这似乎计算了newdiv相对于文档的位置,但是这些值是相对于'main'的,所以它最终位于错误的位置。

这是做我想做的最好的方式,还是我错过了什么?这适用于所有情况/浏览器还是可能存在其他问题?

2 个答案:

答案 0 :(得分:0)

您是否因为填充而遇到问题?您可以使用.outerWidth()来包含填充,边框和可选边距。 outerWidth API

答案 1 :(得分:0)

我认为使用jQuery最接近的是:

var el = $('#existingdiv');
$('#newdiv').css('right', el.offsetParent().width() - el.outerWidth() - el.position().left);

获得底部可以达到同样的目的:

$('#newdiv').css('bottom', el.offsetParent().height() - el.position().top);

这些将把newdiv的右下角定位在existingdiv的右上角。

我不认为我可以使用其他现有的jquery方法更好地获取此信息,这可能非常有用于jquery(或jquery ui)本身。