jQuery obtient la position d'un élément par rapport à un autre élément

Question

J'ai donc un div comme :

<div class="uiGrid">

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

</div>

Et je veux connaître la position du déclencheur de l'uiGrid et j'ai essayé les deux :

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

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

mais aucun des deux ne l'a compris. Offset est relatif au document et position est relatif au parent et non à l'élément spécifié.

Comment dois-je m'y prendre ? Merci

Answer 1

Fais la soustraction toi-même...

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

Answer 2

Ce que vous pouvez faire ici, c'est de soustraire la valeur de la propriété du parent de celle de l'enfant.

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

Answer 3

Le problème pour moi était le fait que j'étais dans un div avec une barre de défilement et que je devais pouvoir prendre en compte la partie cachée jusqu'à l'élément Root.

Si j'utilise ".offset()", cela me donne des valeurs erronées, car cela ne prend pas en compte la partie cachée de la barre de défilement qui est relative au document.

Cependant, j'ai réalisé que la propriété ".offsetTop" relative à son premier parent positionné (offsetParent) était toujours correcte. J'ai donc créé une boucle pour aller récursivement à l'élément Root en additionnant les valeurs de ".offsetTop" :

J'ai créé ma propre fonction jquery pour ça :

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

Vous pouvez utiliser la même chose avec ".offsetLeft" je suppose...

Si vous voulez obtenir la position d'un élément par rapport à un autre élément pour répondre à la question :

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

Un élément (offsetParent) est dit positionné s'il possède un attribut CSS de position relative, absolue ou fixe.

Answer 4

Vous ne comprenez pas ce que vous voulez dire. ....

En plus de ça, essayez :

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