Question

我正在尝试定位每个6的第3个.foo元素。下面，我的意思的一个小例子：

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

据我所知，这只是针对每个第3个元素，但这不太正确，因为它也定位于第一个.foo：http://jsfiddle.net/neal_fletcher/Bb4Hv/

$('.foo').each(function() {

    if(!($('.foo').index(this) % 3)) {

        $( this ).css( "background-color", "red" );
    }

});

有关如何实现我所说明的内容的任何建议将不胜感激！

Answer 1

只需使用nth-child(6n-3)

即可

演示： http://jsfiddle.net/F2D4V/2/

使用jQuery：

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

您的小提琴更新了jQuery：http://jsfiddle.net/Bb4Hv/1/

Answer 2

我个人更喜欢nth-child()方法（正如@Arbel所建议的那样），但对您的问题代码进行微小更改才能使其正常工作：

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

毕竟，你实际上想要每个第6个元素，只是开始偏移2

并且作为次要的注意事项，每个jQuery函数实际上都将索引和元素（native元素）传递给迭代器函数，所以你可以将上面的内容更改为

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

修改

我提到我更喜欢nth-child方法，但根据一些评论判断，或许nth-of-type可能更适合您的要求。

链接FYI：

Mozilla nth-of-type

和

CSS Tricks comparison of the two

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

注意：建立所需元素的公式（即i-2％6或6n-3）不同的原因是javascript以索引0开头为第一个元素，CSS以1开头（对于nth-child或nth-of-type选择器中的n）

jQuery：每6个目标第3个元素

2 个答案: