Как я могу заполнить 3 столбца одним массивом строк (Javascript, HTML)

Question

Если у меня есть массив с 15 строками, и я хочу заполнить 3 столбца (в идеале 3 загрузочных столбца, созданных с помощью div, но они могут быть любыми, если они отвечают) с равными 5 строками в каждом столбце, начиная сво-первых, что является простым способом сделать это в javascript / jQuery?

Сейчас я думаю сделать три отдельные для циклов , проверяя array[n] добавить <li> 5 раз к трем различным <ul>, которым я присваиваю идентификатор, но все звучит так, как будто может быть более простой способ добиться этого.

Может быть, трюк css для разделения 15 строкв три столбца?

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 будет пустым.