jquery当前可见的第n个孩子

时间:2010-02-01 09:34:33

标签: jquery css-selectors

我可以为每个第4个'项'div设置样式

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

并且工作正常,但后来我隐藏了一些项目,显示了其他一些项目,并希望重新做这个样式,但只有每个第四项可见的样式。所以我有一个将删除这个样式并重新应用它的函数,但我需要在重新应用样式时指定它只是每隔4个可见项目,而不是每个第4个项目。我知道“:visible”选择器但是没有看到用正确的nth-child选择器链接它,任何想法?

我尝试过这样的各种事情无济于事......

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

1 个答案:

答案 0 :(得分:29)

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