如何在跨度类单击中获取 li 的数据 ID答案

【问题标题】：how to get the data-id of the li on span class click如何在跨度类单击中获取 li 的数据 ID
【发布时间】：2018-07-11 12:28:14
【问题描述】：

我有如下使用 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).. 但我不明白。

【问题讨论】：

标签： jquery node.js express

【解决方案1】：

您可以搜索父母并获得它的data-id：

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

或者，只需获取直接父级，并使用data 方法获取值：

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

【讨论】：

【解决方案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>

【讨论】：