如何獲取span類中li的data-id單擊

Question

我有如下顯示使用ul li的數據。

<ul class="quotes">
    <% for(var i=0; i<quotes.length; i++) {%>
        <li class="quote" data-id= "<%= quotes[i]._id %>">
            <span><%= quotes[i].name %></span> - 
            <span><b><%= quotes[i].price %></b></span>
            <span class="remove">X</span>
        </li>
    <% } %>
</ul>

當我單擊類刪除跨度時，我想獲取該li的數據ID。

我努力了，

$('.remove').on('click',  function(e){
    $(this).attr('data-id');
});

並且還嘗試了$（this）.closest（li）。。但是我沒有。

Answer 1

您可以搜索父母並獲取其data-id ：

$('.remove').on('click', function() {
    $(this).parents('li').attr('data-id');
});

或者，只需獲取直接父級，然后使用data方法獲取值：

$('.remove').on('click', function() {
    $(this).parent().data('id');
});

Answer 2

您可以使用$(this).parent().attr('data-id')或$(this).closest('li').attr('data-id')或$(this).parents('li').attr('data-id');

closest()從DOM樹中選擇與選擇器匹配的第一個元素。

parent()在DOM樹中選擇一個元素。

parents()方法與parent()類似，但會選擇DOM樹中的所有匹配元素。

 $('.remove').on('click', function(e){ console.log($(this).parent().attr('data-id')); console.log($(this).closest('li').attr('data-id')); console.log($(this).parents('li').attr('data-id')); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="quotes"> <li class="quote" data-id="1"> <span>name</span> - <span><b>123</b></span> <span class="remove">X</span> </li> <li class="quote" data-id="2"> <span>name</span> - <span><b>123</b></span> <span class="remove">X</span> </li> <li class="quote" data-id="3"> <span>name</span> - <span><b>123</b></span> <span class="remove">X</span> </li> </ul>