使用 Javascript 在列中呈现动态计数 div

Question

谁可以用JavaScript编写逻辑来按列渲染div。在每列 4 个div 中。div 计数是动态的。

像这样的东西

div1 div5 div8
div2 div6 div9
div3 div7 div10
div4 div7 div11 ........

我尝试使用地图和 for 但我不能。

Answer 1

只需为每四个元素创建一个新行：

const parent = document.body; // or whatever
let row;
for(let i = 0; i < 25; i++) {
if(i % 4 === 0) {
row = document.createElement("div");
row.className = "row";
parent.appendChild(row);
}
const child = document.createElement("div");
child.className = "child";
child.textContent = "div " + i;
row.appendChild(child);
}

Answer 2

如果要像这样分隔div，请使用CSS布局，请始终渲染元素而不将元素分解为某些内容，这是最佳实践