javascript - 如何让这段 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 有一个选择器正好适合这种情况：

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

如果它们都是兄弟姐妹，但穿插了其他元素，则可以使用:nth-of-type。

如果他们不是兄弟姐妹，则没有选择器可以帮助您。

Answer 2

If the elements all have one parent, and the parent has no other children, you can use nth-child. If that isn't the case, it will be a bit more complicated. Something like this may work:

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

A slightly faster solution, though slightly less intuitive, uses addClass directly:

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

Answer 3

I like SLaks answer. However, you can also create a loop in JS:

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