如何让这段 JavaScript 代码更高效？ [关闭]

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;
}