Get last visible div's attribute

Question

This is kind of hard to explain. Here's an example of my HTML:

<div id="container">
    <div row="1">
    </div>
    <div row="2">
    </div>
    <div row="3">
    </div>
    <div row="4">
    </div>
    <div row="5">
    </div>
</div>

I need to basically find the last <div> in the container <div> and get the row attribute from it. This 99% of the time ends up being the biggest number, but not guaranteed to be.

Answer 1

Use the last-child-selector^[docs] to fetch the last row, then the attr()^[docs] method to get the value of the attribute.

var row = $('#container > div:last-child').attr('row');

Example: http://jsfiddle.net/TZyPT/

You may want to consider the HTML5 data- attribute for custom attributes. jQuery supports it in older browsers with the data()^[docs] method.

<div id="container">
    <div data-row="1">
    </div>
    <div data-row="2">
    </div>
    <div data-row="3">
    </div>
    <div data-row="4">
    </div>
    <div data-row="5">
    </div>
</div>

---

var row = $('#container > div:last-child').data('row');

Example: http://jsfiddle.net/TZyPT/1/

Answer 2

jQuery has a lovely method for that:

$('div#container > div').last().attr('row')