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');
    }
});

e.g。 http://jsfiddle.net/bDePR/1/

修改

这一点，@ amustill也是如此，但效率更高/更简洁

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

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

1 个答案: