jQuery的:nth-​​child和隐藏行的问题 [英] Problem with jQuery's :nth-child and hidden rows

问题描述

我有一个带有斑马效果的简单桌子:

I have a simple table with a zebra-effect:

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

现在，我必须隐藏/显示某些行.但是当我这样做时，那些隐藏的行仍然会计数，并且斑马效果不再真正起作用.说显示第1行，隐藏第2行，再次显示第3行.现在1和3都显示在了顶部，因为2被隐藏了，但是由于它们都是奇数，所以它们都具有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.

我尝试过这样的事情:

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

但似乎计数时不会跳过类hide的行，从而导致相同的问题.

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

是否有一个技巧可以只计算未隐藏的行并确定它们是奇数还是偶数?最好使用jQuery选择器代替某些功能.

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.

推荐答案

您可以尝试以下方法:

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

这篇关于jQuery的:nth-​​child和隐藏行的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！