Question

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

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

jQuery有position()，但$("#target").position()返回#target相对于其偏移父级的偏移量，即#c（不是#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

您可以使用.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/

Answer 3

这是我为我们正在开发的项目制作的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;
};

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

3 个答案: