Problem with jQuery's :nth-child and hidden rows

Question

I have a simple table with a zebra-effect:

$('table.zebra tbody tr:nth-child(odd)').addClass('darker');

Now I have to hide/show certain rows though. But when I do this, those hidden rows will still count and the zebra-effect doesn't really work anymore. Say rows 1 is shown, 2 is hidden, and 3 is shown again. Now both 1 and 3 are displayed on top of each other since 2 is hidden, but they both have the darker background from the darker class since they're both odd.

I tried something like this:

$('table.zebra tbody tr:nth-child(odd):not(.hide)').addClass('darker');

But it seems like it doesn't skip the rows with the class hide when counting, causing the same problem.

Is there a trick to only count the rows that are not hidden and determine whether they are odd or even? Preferably using the jQuery selectors instead of some function.

Answer 1

You could try something like:

$('table.zebra tbody tr:not(.hide)').filter(":odd").addClass('darker');