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

cyej8jka  于 2023-06-29  发布在  jQuery
关注(0)|答案(4)|浏览(159)

所以我有一个div像这样:

<div class="uiGrid">

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

</div>

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

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

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

但都没得到偏移量相对于文档,位置相对于父元素而不是指定的元素。
我该怎么做?谢谢

c7rzv4ha

c7rzv4ha1#

自己做减法就行了
var relativeY = $("elementA").offset().top - $("elementB").offset().top;

sycxhyv7

sycxhyv72#

基本上,你可以做的是,从子属性值中减去父属性值。

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

anhgbhbe3#

你没抓住重点…
除此之外,试试:

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

9rnv2umw4#

对我来说,问题是我在一个带有滚动条的div中,我必须能够考虑到隐藏的部分,直到根元素。
如果我使用“.offset()”,它会给我错误的值,因为它没有考虑滚动条的隐藏部分,因为它是相对于文档的。
然而,我意识到相对于其第一个父定位(offsetParent)的“.offsetTop”属性总是正确的。所以我做了一个循环,通过添加“.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位置属性,则称其为定位的。

相关问题