使用javascript划分元素并计数

对于我的列表，我想为每4个元素应用一些不同的样式

我试着用这样的方法将索引除以4：

var e=document.querySelectorAll（'.line li'）；
变量y=[…e]//从节点列表转换为数组
函数logArrayElements（元素、索引、数组）{
var y=指数/4；
控制台日志（y）；
}
y、 forEach（logArrayElements）
.mainUl{
列表样式：无；
显示：内联块；
}
ulParent{float:left；}
.线路{
列表样式：无；
}
李先生{
填充：10px；
边框：1px实心橙色；
浮动：左；
}



q
w
e
r
x
y
q
z




q
w
e
r
x
y
q
z




q
w
e
r
x
y
q
z


你可以用普通的css来实现

首先是JS的答案：

首先要实际循环“行”，然后循环其中的项目：

const lines = [...document.querySelectorAll('.line')];

lines.forEach(function (line) {
    // should get you your 0, .25, .5, .75 etc...
    [...line.querySelectorAll('li')].forEach(logArrayElements);
});


现在让我们来看看CSS的乐趣：

基本上可以使用第n个child方法，我在这里做的方法很粗糙，但这只是一个开始


.mainUl{
列表样式：无；
显示：内联块；
}
乌尔巴恩特{
浮动：左；
}
.线路{
列表样式：无；
}
李先生{
填充：10px；
边框：1px实心橙色；
浮动：左；
}
.行李：第n个孩子（n）{
背景：红色；
}
.行李：第n个孩子（n+5）{
背景：紫色；
}
.行李：第n个孩子（n+9）{
背景：绿色；
}
.行李：第n个孩子（n+13）{
背景：灰色；
}
///etc



q
w
e
r
x
y
q
z
q
w
e
r
x
y
q
z




q
w
e
r
x
y
q
z
q
w
e
r
x
y
q
z




q
w
e
r
x
y
q
z
q
w
e
r
x
y
q
z


我知道我可以用第n个子css实现这一点，但我想用javascript迭代元素。@RulerNature请看我答案的第一部分：-）我看到了，但对我来说太多了：））如果你能给我更多的信息，可能会写下这种方式details@RulerNature基本上先循环外部元素，然后循环内部元素（然后索引将基于外部列表，而不是页面上的整个列表项）是的，我看到了，但实际上我想迭代元素，我使用了indexex，因为我不知道其他方法。因此，如果我使用QuerySelector，所有元素都将返回li，但我想要的是返回4个元素li，其他4个元素li，其他4个元素等等。