Получение РАЗЛИЧНОЙ позиции элементов с одинаковым классом

Question

У меня есть таблица динамических c, и в каждой строке есть кнопка меню. Эти кнопки имеют один и тот же класс. Я хочу получить X, Y позиции кнопки, которую я нажимаю. Моя текущая попытка заключается в использовании следующего:

$(document).ready(function () {
    $(".actionMenu").click(function () {
        let element = this.className;
        let elementPos = $("." + element).position();
    })
})

Моя проблема заключается в том, что при этом возвращается элемент FIRST с соответствующим именем класса. Есть ли способ, которым я могу получить позицию элемента, на которую щелкнули без указания класса?

Fiddle

ОТВЕТ

Я проверял положение, используя журнал предупреждений / консоли, и он давал мне один и тот же ответ каждый раз, я проверял его с использованием фактического DIV и просто менял css, и он работает отлично, как и предполагалось, div перемещается к соответствующему вместо позиции я использовал смещение.

Спасибо всем, кто помог.

Answer 1

Я думаю, что вы можете сделать это

$('.actionMenu').on('click', function () {
  let x_pos = $(this).position().top;
  let y_pos = $(this).position().left;
  alert("Top:"+x_pos+" Left:"+y_pos);
});

ССЫЛКА: https://jsfiddle.net/wep142Lg/2/

// From http://learn.shayhowe.com/advanced-html-css/jquery

// Change tab class and display content
$('.actionMenu').on('click', function() {
  console.log("Top:" + $(this).position().top + " Left:" + $(this).position().left);
});

table {
  border: 1px solid #222;
  width: 100%;
}

td {
  border: 1px solid #222;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>Row 1</td>
    <td>
      <button class="actionMenu">Button</button>
    </td>
  </tr>
  <tr>
    <td>Row 2</td>
    <td>
      <button class="actionMenu">Button</button>
    </td>
  </tr>
  <tr>
    <td>Row 3</td>
    <td>
      <button class="actionMenu">Button</button>
    </td>
  </tr>
  <tr>
    <td>Row 4</td>
    <td>
      <button class="actionMenu">Button</button>
    </td>
  </tr>
</table>