如何通过jQuery获取.find（）对象中的最后一个元素

Question

我有这样的DOM：

<div class="parent">
   <button class="add-tr">Add</button>
   <table class="child">
   <tr data="0"></tr>
   <tr data="1"></tr>
   ...
   </table>
</div>
<div class="parent">
   <button class="add-tr">Add</button>
   <table class="child">
   <tr data="0"></tr>
   <tr data="1"></tr>
   ...
   </table>
</div>
...

当我单击“添加”按钮时，我想从它自己的最后一个父类获取data属性的值。

我正在使用此方法来获取最后一个元素，但是它不起作用。

$('.add-tr').click( function() {
   var last = $(this).parent().find('.child:last').attr('data');
   alert(last);
})

知道为什么吗？或任何其他建议来获取表中的最后一个元素？

更新 是的，我发现了问题，原来是我忘记了'tr'。谢谢你们的回答。你们所有的人都给出了正确的答案，但愿我能接受您所有的答案。谢谢

Answer 1

尝试这个

   var last = $(this).parent().find('.child').find('tr').last().attr('data');

在您的示例中，您获得最后一个table，但您需要获得最后一个tr

例

Answer 2

'.child:last'选择器将选择最后一个具有child类的元素。当child类应用于 时<table>，此选择器将选择表元素，而您想要选择最后一个<tr>。

由于 on 没有data属性<table>，因此.attr('data')on 会返回undefined。

data要获取最后一个属性的值，<tr>请使用选择器tr:last。

var value = $(this)           // Button that is clicked
    .parent()                 // Direct parent element i.e. div.parent
    .find('.child tr:last')   // Get the last <tr> inside .child
    .attr('data');            // Get value of data attribute

由于该.child元素位于按钮旁边，next()因此可用于获取该table.child元素。

var value = $(this)           // Button that is clicked
    .next('.child')           // Next element i.e. table
    .find('tr:last')          // Get last <tr>
    .attr('data');            // Get value of "data" attribute

我建议使用data-*属性在自定义属性中存储数据。

<tr data-num="0">Foo</tr>
<tr data-num="1">Bar</tr>

并获取自定义数据属性的值使用data()

.data('num')

如果您只想获取最后一个的索引tr，则无需将其存储在元素上。您可以使用 来获取索引index()。

.index()

这将返回元素的索引。请注意，这是从零开始的索引，这正是您想要的。