如何在循环中为第7、14、21…项添加独立CSS样式？

你要找的是循环里第7、14、21……的元素，注意循环的j是从0开始索引的，所以实际目标元素对应的索引是6、13、20……，对应的判断逻辑可以这样写：

核心判断条件 #

if ((j + 1) % 7 === 0)

逻辑说明 #

• j + 1：把从0开始的索引转换成从1开始的元素序号
• % 7 === 0：取模运算判断序号是否是7的倍数，满足条件的就是第7、14、21……项

完整代码示例 #

var items = document.querySelectorAll('.item');   

for(let j = 0; j < items.length; j++) {
    if ((j + 1) % 7 === 0) {     
        items[j].style.height = "300px";
    } 
}

更简洁的替代方案 #

其实不用JS循环也能实现，直接用CSS的:nth-child(7n)选择器就能定位目标元素：

.item:nth-child(7n) {
    height: 300px;
}

这种方式更高效，也避免了JS操作DOM的开销。

内容的提问来源于stack exchange，提问作者manekko