Чтобы разбить список <ul>
с элементами <li>
на 3 отдельных списка, вам понадобится использовать JavaScript для манипуляции с DOM.
- Сначала необходимо получить ссылку на список
<ul>
и все его дочерние элементы<li>
. Вы можете сделать это, используя методыquerySelector
иquerySelectorAll
. Например:
const ulList = document.querySelector('ul'); const liItems = ulList.querySelectorAll('li');
- Затем вам нужно создать 3 новых элемента
<ul>
для каждого из трех списков. Вы можете использовать методcreateElement
для этого:
const ulList1 = document.createElement('ul'); const ulList2 = document.createElement('ul'); const ulList3 = document.createElement('ul');
- Далее необходимо перебрать все элементы
<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); } }
- Наконец, вы можете добавить новые списки в DOM, например, вставить их перед или после исходного списка. Для этого вы можете использовать метод
insertBefore
илиinsertAdjacentElement
. Например:
ulList.parentNode.insertBefore(ulList1, ulList); ulList.parentNode.insertBefore(ulList2, ulList); ulList.parentNode.insertBefore(ulList3, ulList);
Теперь исходный список <ul>
будет разделен на 3 отдельных списка <ul>
, каждый из которых будет содержать треть элементов из исходного списка.