如何使用jQuery获取一个元素相对于另一个元素的位置？

Question

所以我有一个像这样的div：

<div class="uiGrid">

<div class="trigger"></div>

</div>

而且我想知道将触发器位置到uiGrid，并尝试了以下两种方式：

$('.trigger').offset('.uiGrid');

$('.trigger').position('.uiGrid');

但是两者都没有明白。偏移量是相对于文档的，位置是相对于父级而不是指定元素。

我应该如何做到这一点？ 谢谢

- Cameron

---

尝试在CSS中将包装div的位置更改为相对定位。[http：//stackoverflow.com/questions/2842432/jquery-position-isnt-returning-offset-relative-to-parent] - jValdron

Answer 1

自己做减法...

var relativeY = $("elementA").offset().top - $("elementB").offset().top;

- Ya Zhuang

---

实际上并没有 offset().y 这个东西，应该是 offset().top。 - Hengjie

在Chrome上工作得非常完美，但Firefox给出的数字完全不同。 - No Sssweat

对于我的使用情况，由于Firefox的数字有点偏差，我所做的就是将relativeY四舍五入到最近的十分位。 - No Sssweat

Answer 2

在这里你可以做的基本上是，将父属性值从子属性值中减去。

var x = $('child-div').offset().top - $('parent-div').offset().top;

- Prabath Rathnayake

---

这些减值应该放在哪里？ - Tushar Gupta - curioustushar

感谢您的支持。很抱歉我忘记将其分配给变量进行显示。 所以您需要定义一个变量并将减去的值赋值给它。var x = $('child-div').offset().top - $('parent-div').offset().top; - Prabath Rathnayake

为什么你觉得有必要在一个被接受的答案发布2.5年后发布一个多余的回答？ - VictorKilo

这与2.5年前所选的答案完全相同，正如VictorKilo所说。哎呀，这个评论是多余的！ - Buttle Butkus

它澄清了从哪个元素的位置中减去另一个元素的位置。请参考子/父与A/B。 - Max Strater

也许可以，但他们本应该评论原回答或者至少给原作者一些信用。 - actaram

Answer 3

对我来说问题在于我处于一个带有滚动条的div里面，而且我必须考虑到隐藏部分直到根元素为止。

如果我使用“.offset（）”，它会给我错误的值，因为它不考虑滚动条的隐藏部分，而是相对于文档的位置。

然而，我意识到，“.offsetTop”属性相对于其第一个定位父元素（offsetParent）始终是正确的。所以我写了一个循环去递归到根元素，并加上“.offsetTop”的值：

我为此编写了自己的jQuery函数：

jQuery.fn.getOffsetTopFromRootParent = function () {
    let elem = this[0];
    let offset = 0;
    while (elem.offsetParent != null) {
        offset += elem.offsetTop;
        elem = $(elem.offsetParent)[0];
        if (elem.offsetParent === null) {
            offset += elem.offsetTop;
        }
    }
    return offset;
};

我想你可以使用".offsetLeft"来实现同样的功能... 如果你想获取一个元素相对于另一个元素的位置，答案如下：

let fromElem = $("#fromElemID")[0];
let offset = 0;
while (fromElem.id.toUpperCase() != "toElemID".toUpperCase()) {
    offset += fromElem.offsetTop;
    fromElem = $(fromElem.offsetParent)[0];
}
return offset;

如果一个元素（offsetParent）的CSS属性被设置为relative、absolute或fixed，那么它就被称为定位元素。

- A. Morel

Answer 4

你在这里误解了重点....

此外，请尝试：

myPosY = $('.trigger').offset().left - $('.uiGrid').offset().left;
myPosX = $('.trigger').offset().top - $('.uiGrid').offset().top;

- Jorden van Foreest

---

哦，但是：我的纵坐标是顶部，我的横坐标是左边。 - tiepnv