[jQuery] attrで各リストの属性値を取得したい

Question

要件定義

HTML側

① 各リストを用意
② そのリスト要素にdata-id(1, 2, 3, ...)とclass(全て同じでaddクラス)を付与

jQuery側

③ ②で設定したclassをクリックしたら各リストのdata-idの値を取りたい

うまくいかないこと

属性値は取れるのだがどのリストをクリックしても一番上のリストの「1」しか取得できない
各リストの値を取得するにはどうすればいいのでしょうか？

コード

    <ul>
        <li data-id="1" class="add">リスト1</li>
        <li data-id="2" class="add">リスト2</li>
        <li data-id="3" class="add">リスト3</li>
    </ul>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script>
        $(function(){
            $(document).on('click', '.add', function () {
                const dataId = $('.add').attr('data-id');
                alert(dataId);
            });
        });
    </script>

Answer 1

datasetの書き換えを行わないのであれば初期値としてdata()メソッドでカスタムデータは参照できます

$(function(){
  $('.add').on('click',function () {
    var dataId = $(this).data('id');
    console.log(dataId);
  });
});

Answer 2

attrは最初の要素の属性の値を取得するので「1」が取得されます。
https://api.jquery.com/attr/

イベントが発生した要素は$(this)を使えば取得できます。

$(document).on('click', '.add', function () {
	const dataId = $(this).attr('data-id');
	alert(dataId);
});

Comments

[DaisukeMori]

ありがとうございました。意図する挙動になりました。