Как получить координаты x, y элемента списка относительно его родителя <ul>

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 <li> после его нажатия.

$('.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

Вам просто нужно вызвать position , чтобы получить позицию элемента относительно его родителя.

Answer 4

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

Answer 5

Используйте метод jQuery postion () .