I have DOM like this:

<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>
...

When I click on the Add button, I would like to get the value of the data attribute from the last of it own parent class.

I am using this method to get the last element,but it doesn't work.

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

Any idea why? Or any other suggestion to get the last element in the table?

UPDATE Yes, I found the problem, turn out is I forgot the 'tr'. Thanks for your guys answer. All your guys giving the correct answer, I wish I can accept all your answers. Thanks

I have DOM like this:

<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>
...

When I click on the Add button, I would like to get the value of the data attribute from the last of it own parent class.

I am using this method to get the last element,but it doesn't work.

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

Any idea why? Or any other suggestion to get the last element in the table?

UPDATE Yes, I found the problem, turn out is I forgot the 'tr'. Thanks for your guys answer. All your guys giving the correct answer, I wish I can accept all your answers. Thanks

• javascript
• jquery

• $(this).parent().children().last() – adeneo Commented Apr 26, 2015 at 12:15
• yet another variant: var last = $(this).parent().find('.child :last').attr('data'); – Grundy Commented Apr 26, 2015 at 14:38

6 Answers 6

Try this

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

In your example you get last table, but you need get last tr

Example

'.child:last' selector will select the last element having child class. As child class is applied to <table>, this selector will select table element, while you want to select last <tr>.

As there is no data attribute on <table>, .attr('data') on it will return undefined.

To get the value of data attribute on last <tr> use the selector 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

As the .child element is next to the button, next() can be used to get the table.child element.

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

I'll recommend to use data-* attribute to store data in custom attribute.

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

And to get the value of custom data attribute use data()

.data('num')

If you just want to get the index of the last tr, there is no need to store that on element. You can get the index by using the index().

.index()

This will return index of an element. Note that this is zero-based index which is exactly how you want.

$(".parent").click(function(){

$(this + " tr:last-child").attr("data");

});

should do.

Your code was almost correct, you missed tr:last , i.e.:

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

DEMO

http://jsfiddle.net/tuga/vr1knxqq/3/

$('.add-tr').click( function(event) {
   var last = $(event.target).next().find("tr").last().attr("data");
   alert(last);
})

fiddle-example

You can get an array of the tr elements by using find('.child tr') and to get the last element in that array you can use last(). Putting it all together you have this:

$('.add-tr').click( function() {
   var lastTr = $(this).parent().find('.child tr').last(),
       lastData = $(lastTr).attr('data');

   alert(lastData);
});

I have setup a codepen here http://codepen.io/anon/pen/aOzmKg to show this working.