确定一个元素相对于其偏移父元素的定位祖先的位置

Question

我想确定以下HTML文档中#target相对于#a的偏移量 - 也就是说，我想找到x和y的值：

http://dl.dropbox.com/u/2792776/screenshots/2012-06-09_1814.png

jQuery有position()，但$("#target").position()返回#target与其偏移父级#c（而不是#a）的偏移量。

我需要一个函数，它相当于$.fn.position()，但是它返回相对于目标的“偏移祖先”而不是直接偏移父级的位置。例如：$("#target").positionRelativeTo("#a")

- Tom Lehman

Answer 1

您可以根据偏移量进行计算：

var topoffset = $('#target').offset().top - $('#a').offset().top;
var leftoffset = $('#target').offset().left - $('#a').offset().left;

- lucuma

Answer 2

这是我为我们正在开发的项目制作的一个jQuery扩展程序。我认为这可能是您正在寻找的内容。

$.fn.relativePositionToAncestor = function (ancestor) {
    var positionedAncestor = $(ancestor);
    var object = $(this);

    var relativeOffset = { left: 0, top: 0 };

    var leftSpacing = parseInt(object.css("margin-left"));
    var topSpacing = parseInt(object.css("margin-top"));

    relativeOffset.left -= leftSpacing;
    relativeOffset.top -= topSpacing;

    var offsetParent = object.offsetParent();

    while (offsetParent[0] !== positionedAncestor[0] && !offsetParent.is('html')) {
        var offsetParentPosition = offsetParent.position();

        var offsetParentPositionLeft = offsetParentPosition.left;
        var offsetParentPositionTop = offsetParentPosition.top;

        relativeOffset.top -= offsetParentPositionTop;
        relativeOffset.left -= offsetParentPositionLeft;

        leftSpacing = parseInt(offsetParent.css("margin-left"));
        leftSpacing += parseInt(offsetParent.css("border-left-width"));
        topSpacing = parseInt(offsetParent.css("margin-top"));
        topSpacing += parseInt(offsetParent.css("border-top-width"));

        relativeOffset.left -= leftSpacing;
        relativeOffset.top -= topSpacing;

        offsetParent = offsetParent.offsetParent();
    }
    return relativeOffset;
};

- Marsupilami

Answer 3

您可以利用.parentsUntil()并以此计算组合位置：

var x=0;
var y=0;
$('#target').add($('#target').parentsUntil($('#a').parent())).each(function(){
  x+=$(this).position().left;
  y+=$(this).position().top;
});
alert(x+':'+y);​

http://jsfiddle.net/rDzpy/

- Andy

---

如果#a的父元素具有position：static，这仍然有效吗？ - Tom Lehman

@HoraceLoeb 我不确定，但我认为它应该这样。 - Andy