如何检索与其父项相关的列表项 sx,y 坐标

Question

理想情况下，我希望有一个这样的列表：

<ul class="parent" id="app1">
  <li><a href="#">Item 1</a>
    <ul class="child">
      <li><a href="#">Sub Item 1 - 1</a></li>
    </ul>
  </li>
  <li><a href="#">Item 2</a></li>
</ul>

我需要知道单击后

的 x,y 坐标。

$('.parent > li').click( function() {

  var x = $(this)...  // x coordinate
  var y = $(this)...  // y coordinate
  var sub_y = y + $(this).height();
  var sub_x = x; // want x to be 0 (left side of ul.parent)

});

Answer 1

查看演示->

使用 .position()：

$('.parent > li').click( function() {
  var pos = $(this).position();
  var x = pos.left;  // x coordinate
  var y = pos.top;  // y coordinate
  var sub_y = y + $(this).height();
  var sub_x = x; // want x to be 0 (left side of ul.parent)
  alert(x + ', ' + y);
});

这将允许您可以获得计算出的元素的顶部和左侧位置。

Answer 2

$('.parent > li').click( function() {
    var x = $(this).offset().left;  // x coordinate
    var y = $(this).offset().top;  // y coordinate

    var px = $(this).parent().offset().left;
    var py = $(this).parent().offset().top;

    var rel_x = x - px;
    var rel_y = y - py;
});

在 JSFiddle

Answer 3

使用 jQuery postion() 方法。

Answer 4

  var x = $(this).offset().left;
  var y = $(this).offset().top;

Answer 5

您只需调用 position 即可获取元素相对于其父元素的位置。