将 nth-child 伪选择器应用于特定的行类

Question

我有一个问题，我不确定是浏览器问题还是 CSS3 问题。

我有一个使用标准 HTML 表格的数据网格：

<table>
    <thead>
        ...
    </thead>
    <tbody>
        <tr class="found">
            <td>...</td>
            <td>...</td>
            <td>...</td>
        </tr>
        <tr class="found">
            <td>...</td>
            <td>...</td>
            <td>...</td>
        </tr>
        <tr class="found">
            <td>...</td>
            <td>...</td>
            <td>...</td>
        </tr>
    </tbody>
</table>

我有一个搜索 TD 元素内容的 jQuery 函数。如果找到，它会维护找到的类。如果未找到，则删除找到的类并添加未找到的类。当然，not-found 只是设置 display: none

所以搜索功能按我想要的方式工作。班级被适当分配。但是，我使用 CSS 伪选择器将样式应用于交替行。

tr.found:nth-child(even) {
    background: #fff;
}
tr.found:nth-child(odd) {
    background: #000;
}

这在搜索发生之前效果很好。但是，在搜索和应用未找到的类之后，伪选择器似乎只适用于元素而不是元素和类。要么，要么在页面加载期间应用伪选择器并在此时保持静态。

我可以通过我的 jQuery 搜索并重新分配特定的偶数和奇数类，但这会变得混乱。这没什么大不了的，但我的列标题是可排序的，所以我必须在该事件上重新应用类，同时创建一种低效的方法来做我正在做的事情。如果数据样本太大，您可能会看到类的迭代变化，这是我试图避免的。

有什么解决办法吗？

编辑

根据要求，我设置了一个 JSFiddle，以便天才们可以玩弄它：http://jsfiddle.net/bDePR/

搜索总裁或秘书将产生该行为。

Answer 1

这是我能想到的最简单的方法，使用 jQuery :visible 选择器查找所有可见的 tr 元素（在它们被排序之后），然后简单地将 CSS 应用于交替的元素！

// reset the background
$j('tr').css('background', '#ccc');
$j('tr:visible').each(function(i){
    if((i % 2) == 0) {
        // apply background to every other one
        $j(this).css('background', 'yellow');
    }
});

例如http://jsfiddle.net/bDePR/1/

编辑：

@amustill 的做法相同，但更高效/简洁

// reset the background
$j('tr').css('background', '#ccc');
$j('.found').filter(':odd').css({ background: 'yellow' });