jQuery - check if selected row is last visible row in table

Question

previously i checked whether a row is last row in a table like this in a condition:

$row.is(':last-child')

which works fine.

Now, i have a requirement where some of the rows in the table are hidden - now i have to check whether a specific row is the last visible row in the table.

I tried with this:

$row.is(':visible:last-child')

but not that successfull. Does someone have a clue?

Answer 1

This doesn't work because the last-child is display: none;.

One approach is to iterate the childs to find the index of the last visible child (see fiddle) :

var $rows = $('td');
var $rowsReverse = $($rows.get().reverse());

var $lastVisibleIndex = -1;
$rowsReverse.each(function(index) {
    if ($lastVisibleIndex == -1 && $(this).is(':visible')) {
        $lastVisibleIndex = $rowsReverse.length - index - 1;
    }
});

$rows.each(function(index) {
    var $row = $(this);
    if (index == $lastVisibleIndex) {            
        $row.addClass('red');
    }
});​

Answer 2

Thanx everybody for the quick feedback. I could solve it with the following:

$row.parent().find('tr:visible').last().attr('data-id') is $row.attr('data-id')

(it's in a loop)

@falsarella your answer i guess works fine - is a bit complicated, but it works apparently.