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>

我需要知道点击后<li>的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

See the demo->

使用.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;
});

On JSFiddle

Answer 3

使用jQuery postion()方法。

Answer 4

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

Answer 5

你只需要调用position来获取元素相对于其父元素的位置。

如何检索列表项与其父<ul> </ul>相关的x，y坐标

5 个答案: