如何使JavaScript代码更高效

How to make this JavaScript code more efficient?

本文关键字：高效 代码 JavaScript 何使      更新时间：2023-09-26

我目前正在添加一个类，每四个div有一个特定的类。然而，是否有一个简单的计数，并自动添加到每四个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，我将需要这么多这样的行。谢谢。

CSS有一个适合这种情况的选择器:

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

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

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

如果元素都有一个父元素，并且父元素没有其他子元素，则可以使用nth-child。如果不是这样，情况就复杂了一点。像这样可以工作:

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

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

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

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

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