テンプレートからHTMLデータを取得するリスト - JQuery

Question

テンプレートエンジン（Template7）からリストを生成し、各リスト項目のデータタグにuserIDを追加します。例

<li> 
    <a id='user' data-user-id='5'> 
     <div>content here</div> 
    </a> 
</li> 
<li> 
    <a id='user' data-user-id='6'> 
     <div>content here</div> 
    </a> 
</li> 

のために私は、リスト項目の「ユーザID」のデータを取得しようとしていますjQueryのを使用して、しかし、私が代わりにやっているように見えることは最初のリスト項目のユーザIDを取得している上でクリックしました - この場合は常に5です。

$(document).on("touchend", "#user", function(e) { 
    e.preventDefault(); 

    var userItem = $("#user"); 
    var userID = userItem.data("user-id"); 
    console.log(matchID); 
}); 

どこが間違っていますか？各項目の一意のIDが機能しますが、解析する必要があるため、より良い方法が必要です。このようなことのベストプラクティスはありますか？

<li> 
    <a class='user' data-user-id='5'> 
     <div>content here</div> 
    </a> 
</li> 

ID属性は、その元素に固有であることを意味している。

Answer 1

これで#USERを交換してみは

IDセレクタは、常にIDと一致するとの最初の要素を選択し、あなたのケースで動作するはずです。同じidを持つ複数の要素を持たないことをお勧めします。代わりにクラス名を使用してみてください。 以下のコードを使用することができます。

$(document).on("touchend", "#user", function(e) { 
     e.preventDefault(); 

     var userID = $(this).data("user-id"); 
     console.log(userID); 
    }); 

Answer 2

はこのように、各アンカー項目にCSSクラスを使用します。

Answer 3

To get the content of the attribute **data-user-id** like in <a id='user' data-user-id='5'> you have to use 

$(this).attr("data-user-id") // will return the string "5" 

or .data() (if you use newer jQuery >= 1.4.3) 

$(this).data("user-id") // will return the number 5