jquery 当前可见的第 n 个子级

Question

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

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

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

我已经尝试了各种类似的方法，但没有成功......

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

Answer 1

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

With :nth-child(n), all children are counted, regardless of what they are, and the specified element is selected only if it matches the selector attached to the pseudo-class.

对 each 使用更简单的方法完全可以满足您的需求:

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