如何使用单个字符串数组（Javascript，HTML）填充 3 列

Question

如果我有一个存储了 15 个字符串的数组，并且我想填充 3 列（理想情况下是 3 个由 div 组成的引导列，但只要它们是响应式的就可以是任何列），每列从 5 个字符串开始首先，在 javascript/jQuery 中这样做的简单方法是什么？

现在我正在考虑做 三个 单独的 for 循环，检查 array[n] 以将 <li> 5 次附加到三个不同的 <ul>分配一个 ID，但听起来可能有更简单的方法来实现它。

也许是一个将 15 个字符串分成三列的 css 技巧？

Answer 1

您可以使用splice 将数组中的前5 个元素提取到一个新数组中，然后使用join() 将这些元素连接起来。根据您的描述，此代码应该可以工作：

更新

let arr = [0 ,1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14];
let columns = [".col1", ".col2", ".col3"]
for(let i = 0; i<3; i++)
  document.querySelector(columns[i]).innerHTML = `<li>${arr.splice(0, 5).join("</li><li>")}</li>`;

body{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}

<ul class="col1"></ul>
<ul class="col2"></ul>
<ul class="col3"></ul>

请注意，我在数组中使用了数字而不是字符串，因为我懒得考虑很酷的字符串 :)

注意：此操作后，您的arr将为空。