jQuery jQuery获取元素相对于另一个元素的位置

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/8342667/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-27 10:23:25  来源:igfitidea点击:

jQuery get position of element relative to another element

jquery

提问by Cameron

So I have a div like:

所以我有一个像:

<div class="uiGrid">

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

</div>

And I want to know the position of trigger to uiGrid and have tried both these:

我想知道 uiGrid 的触发器位置并尝试了这两种方法:

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

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

but neither get it. Offset is relative to the document and position is relative to the parent and not the specified element.

但都不明白。偏移量相对于文档,位置相对于父元素而不是指定元素。

How would I do this? Thanks

我该怎么做?谢谢

回答by Ya Zhuang

just do the subtraction your self...

做减法你自己...

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

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

回答by Prabath Rathnayake

what you can do here is basically, subtract parent property value from child property value.

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

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

回答by Jorden van Foreest

You're missing the point here....

你在这里错过了重点......

Besides that, try:

除此之外,请尝试:

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

回答by A. Morel

The problem for me was the fact that I was in a div with a scrollbar and that I had to be able to take into account the hidden part down to the root element.

对我来说,问题是我在一个带有滚动条的 div 中,我必须能够考虑到根元素的隐藏部分。

If I use ".offset()" it gave me wrong values, because it does not take into consideration the hide part of scrollbar as it is relative to the document.

如果我使用“.offset()”,它会给我错误的值,因为它没有考虑滚动条的隐藏部分,因为它是相对于文档的。

However, I realized that the ".offsetTop" property relative to its first parent positioned (offsetParent) was always correct. So I made a loop to go recursively to the root element by additionning the values of ".offsetTop":

但是,我意识到“.offsetTop”属性相对于它的第一个父定位(offsetParent)总是正确的。所以我做了一个循环,通过添加“.offsetTop”的值来递归地到达根元素:

I did my own jquery function for that:

我为此做了我自己的 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;
};

You can use the same with ".offsetLeft" I suppose...

我想你可以将它与“.offsetLeft”一起使用......

If you want to get position of element relative to another element to answer the question:

如果您想获取元素相对于另一个元素的位置来回答问题:

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

An element (offsetParent) is said to be positioned if it has a CSS position attribute of relative, absolute, or fixed.

如果元素 (offsetParent) 具有相对、绝对或固定的 CSS 位置属性,则称该元素已定位。