当前可见的jquery第n个孩子

Question

我可以像这样设置每 4 个“项目”div 的样式

  jQuery(".item:nth-child(4n)").addClass("fourth-item");

效果很好，但是我隐藏了一些项目，显示了一些其他项目并想要重新进行此样式设置，但只设置每个可见的第 4 个项目的样式。所以我有一个函数可以删除这个样式并重新应用它，但我需要在重新应用样式时指定它只是每 4 个可见项目，而不是每 4 个项目。我知道 ":visible" 选择器，但看不到将它与 nth-child 选择器正确链接，有什么想法吗？

我尝试过各种类似的方法都无济于事......

jQuery(".item").removeClass("fourth-item");
jQuery(".item:visible:nth-child(4n)").addClass("fourth-item");

Answer 1

:nth-child 扫描父级的子级，无论它们的样式是什么。 :nth-child 中的计数是相对于父元素的，而不是前一个选择器。这在 :nth-child 的 jQuery 文档中进行了解释：

使用:nth-child(n)，所有子元素都被计算在内，无论它们是什么，并且仅当指定的元素与附加到伪类的选择器匹配时才会被选中。

对each 使用更简单的方法完全符合您的要求：

$('#test li:visible').each(function (i) {
    if (i % 4 == 0) $(this).addClass('fourth-item');
});