时间戳

首页 > 解决方案 > 如何使用单个字符串数组（Javascript，HTML）填充 3 列

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

问题描述

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

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

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

标签： javascriptjqueryhtmlarrayssorting

解决方案

您可以使用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将是空的。

推荐阅读