Question

我目前正在为每个具有特定类别的第4个div添加一个类。但是，是否可以轻松计算它们并自动将其添加到每个第4个div？因为我现在这样做：

$(".item:eq(0)").addClass('first');
$(".item:eq(4)").addClass('first');
$(".item:eq(8)").addClass('first');
$(".item:eq(12)").addClass('first');
$(".item:eq(16)").addClass('first');

这意味着如果有100个这样的div，我需要有这么多行。感谢。

Answer 1

CSS对于这种情况确实有selector：

$(".item:nth-child(4n+1)").addClass('first');

如果他们都是兄弟姐妹，但散布其他元素，则可以使用:nth-of-type代替。

如果他们不是兄弟姐妹，没有选择器会帮助你。

Answer 2

如果元素都有一个父元素，而父元素没有其他子元素，则可以使用nth-child。如果情况并非如此，那将会更复杂一些。这样的事情可能有用：

$('.item').filter(function(idx) {
    return idx % 4 === 0;
}).addClass('first');

稍微快一点的解决方案虽然稍微不那么直观，但直接使用addClass：

$('.item').addClass(function(idx) {
    return idx % 4 === 0 ? 'first' : '';
});

Answer 3

我喜欢SLaks的回答。但是，您也可以在JS中创建一个循环：

var i = 0;
var itemArray = $('.item');
var lastNumber = itemArray.length;
while(i <= lastNumber) {
    itemArray[i].className += ' first';
    i += 4;
}

如何使这个JavaScript代码更有效？

3 个答案: