Как многоуровневый список разобрать на одноуровневые списки?

Question

[Михаил]

Всем доброго времени суток!
Только только начал экспериментировать с JS. Никак не могу найти как список с неограниченной вложенностью превратить в набор одноуровневых списков.

То есть вот такой список:

• овощи
  • картошка
  • капуста
    • пекинская
    • цветная
    • брокколи
  • свекла
• фрукты
  • яблоки
  • груши

Должен превратиться в 4 отдельных списка, которые идут друг за другом:
овощи
фрукты

картошка
капуста
свекла

пекинская
цветная
брокколи

яблоки
груши

Не смог найти решение.

Задумка такая - сделать простейшее меню на JS. На экране всегда один список. Кликаем на пункт - список исчезает, на его месте появляется дочерний и так далее. Аналог файлового менеджера типа Total Commander. Может кто встречал подобное готовое решение?

Comments

[Владимир]

А нельзя ли первичную структуру данных в коде написать а не картинками ?

[Михаил]

Владимир, это и есть то, что поступает в работу. Списки созданные в админке вордпресса. Обычный html с ul и li. Вот так:

<ul>
	<li>овощи
		<ul>
			<li>картошка</li>
			<li>капуста
				<ul>
					<li>пекинская</li>
					<li>цветная</li>
					<li>брокколи</li>
				</ul>
			</li>
		</ul>
		<ul>
			<li>свекла</li>
		</ul>
	</li>
	<li>фрукты
		<ul>
			<li>яблоки</li>
			<li>груши</li>
		</ul>
	</li>
</ul>

Answer 1

[MifeeX]

Есть ответ на learnjavascript
Вот ссыль: https://learn.javascript.ru/task/sliding-tree

Comments

[Михаил]

В том то и дело, что нужно не классическое меню развернул/свернул, а именно разбить на отдельные списки и показывать по одному.

[Rerurk]

Михаил, список как задается? Через массив Али ручками?

[Михаил]

Rerurk, ручками в админке делаются списки разной вложенности.

Answer 2

[Rerurk]

Самое простое присвоить id да собирать урожай

Answer 3

[Владимир]

Читайте про рекурсию, https://developer.mozilla.org/ru/docs/Web/API/Elem...
Выбираете дочерний ul и записываете в массив
Потом проходитесь по массиву циклом и собранные ul вставляете в DOM дерево по очереди

Comments

[Михаил]

Другими словами задачка не простая и новичку не по зубам. Может есть попроще способ? Например допустить ограничение уровня вложенности 10.

Answer 4

[Михаил]

Нашёл вот такое решение https://stackoverflow.com/questions/40184978/conve... Как его допилить под мой алгоритм?