Как извлечь элементы списка ul-li и сохранить их в многомерный массив в JavaScript? 

У меня есть многомерный HTML список в формате ul-li, который включает в себя подсписки. Как мне записать все элементы этого списка в JavaScript объект, сохраняя структуры вложенности? <br/><br/> Я рассматривал возможность перебора всех элементов li с помощью querySelectorAll(), но этот метод не учитывает вложенные элементы. <br/><br/> Есть ли другие способы решения этой задачи?
  • 11 сентября 2024 г. 15:33
Ответы на вопрос 1 
Да, вы можете извлечь элементы списка `ul`-`li` и сохранить их в многомерном массиве в JavaScript, сохраняя структуру вложенности. Для этого вы можете использовать рекурсивную функцию, которая будет обходить каждый элемент `li` и его вложенные элементы.

Вот пример того, как это можно сделать:

```html
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Пример списка</title>
</head>
<body>
    <ul id="myList">
        <li>Элемент 1
            <ul>
                <li>Подэлемент 1.1</li>
                <li>Подэлемент 1.2</li>
            </ul>
        </li>
        <li>Элемент 2</li>
        <li>Элемент 3
            <ul>
                <li>Подэлемент 3.1</li>
                <li>Подэлемент 3.2
                    <ul>
                        <li>Подэлемент 3.2.1</li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>

    <script>
        function parseList(ulElement) {
            let result = [];
            let listItems = ulElement.children; // Получаем все дочерние элементы (li) у ul

            for (let li of listItems) {
                let item = {
                    text: li.firstChild.textContent.trim(), // Получаем текст элемента
                    children: []
                };

                // Проверяем, есть ли вложенный ul
                let nestedUl = li.querySelector('ul');
                if (nestedUl) {
                    item.children = parseList(nestedUl); // Рекурсивно обрабатываем вложенный ul
                }

                result.push(item);
            }

            return result;
        }

        // Получаем основной список и парсим его
        const myList = document.getElementById('myList');
        const parsedList = parseList(myList);
        console.log(parsedList);
    </script>
</body>
</html>
```

### Объяснение:

1. **HTML структура:** Мы создаем вложенный список `ul` с элементами `li`.

2. **Функция `parseList`:**
   - Мы берём элемент `ul` и создаем массив `result`, который будет хранить результат.
   - Обходим все дочерние элементы `li` с помощью цикла `for...of`.
   - Для каждого `li` создаем объект `item`, который хранит текст элемента и массив `children` для вложенных элементов.
   - Проверяем, есть ли вложенный `ul` с помощью `querySelector`, и если есть, рекурсивно вызываем `parseList` для этого вложенного `ul`.
   - Добавляем объект `item` в массив `result`.

3. **Запуск функции:** Мы находим основной `ul` по его `id` и вызываем функцию `parseList`, сохраняя результат в переменную `parsedList`, которую затем выводим в консоль.

Таким образом, вы сможете создать многомерный массив, сохраняя структуру вашего HTML списка.
Похожие вопросы
    Показать ещё