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

Posted 2023-05-09

【中文标题】如何使用单个字符串数组（Javascript，HTML）填充 3 列

【英文标题】：How can i populate 3 columns with a single array of strings (Javascript, HTML)

【发布时间】：2019-04-01 16:49:50

【问题描述】：

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

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

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

【参考方案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将为空。

【讨论】：

这看起来很可靠，我会在页面加载时从 db 数组中设置 var "arr" 值，所以我猜它被清空应该不是问题

这并没有将它们垂直放在 的想法中，我正在尝试找出正确的方法，但据我所知，它改变了一切