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>

当我单击class移除span时，我想获取那个li的data-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>

如何获取span类中li的data-id单击

2 个答案: