How to get last element in a .find () object using jquery
I have a 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 the Add button, I would like to get the value of the data attribute from the last of its own parent class.
I am using this method to get the last item, 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 item in the table?
UPDATE Yes, I found the problem, it turned out I forgot "tr". Thanks for your guys answering. All your guys are giving the correct answer, I wish I could accept all of your answers. thank
source to share
'.child:last'
will select the last element that has a class child
. Since the class child
is applied to <table>
, this selector will select the table element while you want to select the last one <tr>
.
Since <table>
there is no attribute data
, .attr('data')
it will return on it undefined
.
To get the value of an attribute data
on the latter <tr>
, use a 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
Since the element .child
is next to the button, next()
can be used to get the element 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
I recommend using an attribute data-*
to store data in a 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 latter tr
, there is no need to store that element. You can get the index using index()
.
.index()
This will return the index of the element. Note that this is the zero index, which is exactly what you want.
source to share
You can get an array of elements tr
using find('.child tr')
and to get the last element in that array you can use last()
. Putting it all together, you have the following:
$('.add-tr').click( function() {
var lastTr = $(this).parent().find('.child tr').last(),
lastData = $(lastTr).attr('data');
alert(lastData);
});
I installed the code here http://codepen.io/anon/pen/aOzmKg to show this work.
source to share