nth-child() 选择器有问题答案

【问题标题】：Having trouble with nth-child() selectornth-child() 选择器有问题
【发布时间】：2012-08-23 21:35:05
【问题描述】：

对于店面，我正在构建一个简单的选择器，它允许根据元素的类显示和隐藏元素。

我正在使用 nth-child() 选择器为每个第三个元素添加一个类，但即使选择器确实可以显示和隐藏元素，我的脚本在制作后并没有将类添加到第三个元素一个选择。

我使用的代码非常大（而且绝对可以优化），所以举个例子，please take a look at this jsFiddle。

我做错了什么？

【问题讨论】：

基于 HTML，“仅显示 cat 15”应该显示 6、7、8，“仅显示 cat 12”应该显示其他所有内容，对吗？看起来它正在工作......
抱歉，我的问题应该更清楚：脚本的选择部分有效，但如果您单击“仅显示 cat 15”，第二个元素将获得“product_item_last”类，什么时候应该是第三个。我不知道为什么会这样。
您是要获取第三个项目，还是“最后一个”项目？
我正在尝试通过单击其中一个类别来获取所有选择的第三项。
尽管只显示了 6、7 和 8，但剩余的 <div>s 仍然存在......所以，“6”仍然是第三个孩子。

【解决方案1】：

你误解了 nth-child 的作用。

您希望.myclass:nth-child(3n) 选择.myclass 的每第三次出现。

它真正做的是选择它的父节点的每个nth-child 元素，而不考虑类。它基本上充当组合选择器。你的情况

选择每三个同样具有类 .myclass 的元素

在您的情况下，您应该使用：

$(".myclass").each(function(index, item){
    if (index % 3 == 0) {
        // do something
    }
})

【讨论】：

【解决方案2】：

WORKING DEMO

您的代码已修改.. 换行

 jQuery('.' + className).parent().children('.' + className + ':nth-child(3n) a').addClass('product_item_last');

【讨论】：