将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>

我有一个jQuery函数正在搜索TD元素的内容.如果找到它,它会维护找到的类.如果找不到,则删除找到的类并添加一个未找到的类.当然,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/

编辑：

@amusill 的做法与此相同，但更高效/简洁

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