javascript - 斑马条纹忽略隐藏元素

Question

假设我有一个表，其行可以动态分配 .hidden 类。具有该类的行通过 CSS 隐藏。行也使用交替颜色设置样式，如下所示:

tr:nth-child(even) {
    background-color: $light-grey;
}

但是，我希望每个偶数、未隐藏 行都带有阴影。因此，当应用 :nth-child(even) 时，不计算隐藏行，并且模式看起来一致。以下是我的直接尝试，但它没有达到我希望的效果。

tr:not(.hidden):nth-child(even) {
    background-color: $light-grey;
}

:nth-child() 只是引用行的原始索引，而不是 tr:not(.hidden) 中的当前选择范围。两者只是相互“过滤”。

CSS 中是否有 :nth-of-scope/selection()(或简单的 :nth())元类？是否有任何等效或替代方法？

还是我必须求助于 Javascript？

(我应该说我也可以使用 jQuery)

Answer 1

在纯 CSS 中无法做到这一点，因为添加 display:none 或 visibility:none 不会从 DOM 中删除元素，这正是 CSS用途。

因此，您需要添加一些 JavaScript(在页面加载后运行)来执行此操作，like so

var trs = document.getElementsByTagName("tr"), // Select whichever ones you need
    count = 0; // Counter for the non-hidden ones

for(var i = 0; i < trs.length; i++) {    
    if(!trs[i].classList.contains("hidden") && (count++)%2 == 0) { // Odd ones
        trs[i].style.background = "black";
    } else if(!trs[i].classList.contains("hidden")) { // Even ones
        trs[i].style.background = "lightgrey";
    }
}