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
'.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.
try it
var last = $(this).parent().find('.child').find('tr').last().attr('data');
In your example, you will get the last one table
, but you need to get the last onetr
Example
$(".parent").click(function(){
$(this + " tr:last-child").attr("data");
});
...
$('.add-tr').click( function(event) {
var last = $(event.target).next().find("tr").last().attr("data");
alert(last);
})
example script
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.
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/