Чтобы разбить список <ul>
с элементами <li>
на 3 отдельных списка, вам понадобится использовать JavaScript для манипуляции с DOM.
1. Сначала необходимо получить ссылку на список <ul>
и все его дочерние элементы <li>
. Вы можете сделать это, используя методы querySelector
и querySelectorAll
. Например:
const ulList = document.querySelector('ul'); const liItems = ulList.querySelectorAll('li');
2. Затем вам нужно создать 3 новых элемента <ul>
для каждого из трех списков. Вы можете использовать метод createElement
для этого:
const ulList1 = document.createElement('ul'); const ulList2 = document.createElement('ul'); const ulList3 = document.createElement('ul');
3. Далее необходимо перебрать все элементы <li>
и перемещать каждый элемент в один из трех новых списков. Вы можете использовать метод appendChild
, чтобы добавить элемент в конец списка. Чтобы определить, в какой список добавить элемент, можно использовать оператор %
для определения остатка от деления индекса элемента на 3. Например:
for (let i = 0; i < liItems.length; i++) { const liItem = liItems[i]; if (i % 3 === 0) { ulList1.appendChild(liItem); } else if (i % 3 === 1) { ulList2.appendChild(liItem); } else { ulList3.appendChild(liItem); } }
4. Наконец, вы можете добавить новые списки в DOM, например, вставить их перед или после исходного списка. Для этого вы можете использовать метод insertBefore
или insertAdjacentElement
. Например:
ulList.parentNode.insertBefore(ulList1, ulList); ulList.parentNode.insertBefore(ulList2, ulList); ulList.parentNode.insertBefore(ulList3, ulList);
Теперь исходный список <ul>
будет разделен на 3 отдельных списка <ul>
, каждый из которых будет содержать треть элементов из исходного списка.