javascript - 如何获得其父级的子级元素的左侧和顶部位置

我有一个div元素的父子结构（父结构是称为dartboard的div，子div称为rotatingDiv，然后有一个称为crosshair的孩子）。

dartboard
     > roatingDiv
            > crosshair

飞镖容器容纳一个旋转容器（rotaingDiv），然后该容器容纳一个子元素（十字线）。我想找到相对于飞镖容器的x和y位置。这是我目前所拥有的：

$('#dartboard').append( $('#rotatingDiv').append( $('#crosshair') ) );

        X = $('#crosshair').position().left.toFixed(1)
        Y = $('#crosshair').position().top.toFixed(1)

console.log("x is "+X+", y is "+Y);

此过程在每秒的计时器中运行，检查x和y值后，我注意到我只收到有关crosshair元素位于rotatingDiv内而不是在飞镖板级别（父级）的信息。的父母）。有人知道我该怎么做吗？

最佳答案

这应该工作：

var pos1 = $("#crosshair").position();
var pos2 = $("#crosshair").parent().position(); // or $('#rotatingDiv').position();

var x = (pos1.left + pos2.left ).toFixed(1);
var y = (pos1.top  + pos2.top  ).toFixed(1);

小心：


  注意：jQuery不支持获取的位置坐标
  隐藏的元素或说明设置的边框，边距或填充
  身体元素。


您可以检查API here。