Javascript jQuery：以每6个元素中的第3个元素为目标

我正试图以每6个元素中的第3个

.foo

元素为目标。下面是我的一个小说明：

1
2
3 (this)
4
5
6
1
2
3 (this)
4
5
6
and so on...

据我所知，这只是针对每三个元素，但这并不完全正确，因为它也针对第一个

.foo

：

任何关于如何实现我所阐述的目标的建议都将不胜感激

只需使用第n个孩子（6n-3）

演示：

使用jQuery：

$('.foo:nth-child(6n-3)').css("background-color", "red");

用jQuery更新您的小提琴：

只需使用第n个子（6n-3）

演示：

使用jQuery：

$('.foo:nth-child(6n-3)').css("background-color", "red");

---

你的小提琴用jQuery更新了：

我个人更喜欢

nth-child（）

方法（正如@Arbel所建议的那样），但是对你的问题代码进行一个小的修改以使其发挥作用：

$('.foo').each(function() {    
    if(!(($('.foo').index(this)-2) % 6)) {    
        $( this ).css( "background-color", "red" );
    }    
});

毕竟，您实际上需要每6个元素，只是开始偏移2

作为一个次要的补充说明，jQuery函数实际上将索引和元素（本机元素）传递给迭代器函数，因此您可以将上述内容更改为

$('.foo').each(function(i,ele) {
    if(!((i-2) % 6)) {
       $(ele).css( "background-color", "red" );
    }
});

编辑

我提到我更喜欢

nth child

方法，但是从一些评论来看，可能

nth类型的
更适合您的要求

链接供参考：


及


类型为
n的示例

.foo:nth-of-type(6n-3)
{
    background-color: red;
}

注意：建立所需元素（即i-2%6或6n-3）的公式不同的原因是javascript以索引0作为第一个元素开始，CSS以1开始（对于第n个子元素或第n个类型选择器）
我个人更喜欢
n-child（）
方法（正如@Arbel所建议的），但为了让问题代码发挥作用，对问题代码进行一个小的修改是：

$('.foo').each(function() {    
    if(!(($('.foo').index(this)-2) % 6)) {    
        $( this ).css( "background-color", "red" );
    }    
});

毕竟，您实际上需要每6个元素，只是开始偏移2

作为一个次要的补充说明，jQuery函数实际上将索引和元素（本机元素）传递给迭代器函数，因此您可以将上述内容更改为

$('.foo').each(function(i,ele) {
    if(!((i-2) % 6)) {
       $(ele).css( "background-color", "red" );
    }
});

编辑

我提到我更喜欢
nth child
方法，但是从一些评论来看，可能
nth类型的
更适合您的要求

链接供参考：


及


类型为
n的示例

.foo:nth-of-type(6n-3)
{
    background-color: red;
}

注意：用于建立所需元素（即i-2%6或6n-3）的公式存在差异的原因是javascript以索引0开头作为第一个元素，CSS以1开头（对于第n个子元素或第n个类型选择器）
1-6在同一个分区，还是不同？@Freak\u Droid似乎我忘了把JSFIDLE链接放进去，Duhh。现在，这里也添加了：1-6在同一个分区，还是不同？@Freak\u Droid似乎我忘了把JSFIDLE链接放进去，Duhh。现在，这里也添加了：这是唯一的目标类型，而不是类，因此，如果有不同的兄弟t类它不起作用。我只想把
.foo
类作为目标。他是正确的。所有li元素都计算在第n个子元素中，而不仅仅是.foo元素。不过，这只是目标类型，而不是类，因此如果有其他类的同级，它将不起作用。我只想把
.foo
类作为目标。他是正确的。所有li元素都是我算在第N个孩子里，而不仅仅是.foo个孩子。