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

Question

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

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

jQuery 有position(), 但$("#target").position()返回#target' 相对于其父偏移量的偏移量，即#c(not #a)

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

Answer 1

您可以根据偏移量计算它：

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

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;
};

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/