使用 Javascript/jQuery 遍历嵌套列表并存储在数组中

Question

我看到了几个关于将数组/对象转换为嵌套列表的问题，但我发现只有one relevant question 解决了我的问题。我尝试了几种访问元素子元素的方法，但它只会进一步破坏我的代码。

我有一个嵌套的无序列表。

<div id="sortableSitemap">
    <ul class="sortable ui-sortable">
        <li id="world_news_now"><div>World</div>
            <ul>
                <li id="the_news"><div>The News</div></li>
            </ul>
        </li>
        <li id="sports_news_cool"><div>Sports</div></li>
    </ul>
</div>

目前，它包含 3 个项目，如下所示：

-World
    --The News
-Sports

可以有任意数量的具有不同深度的节点。我正在尝试将列表存储到包含一些附加信息的数组中。

每个节点都会根据其出现的顺序获得一个数字的顺序 ID（第一个节点是 1，第二个是 2），无论深度如何（即 World = 1，The News = 2，Sports = 3）。我还想存储节点父节点的 ID（根为 0）。因此，父 ID 将是：World = 0，The News = 1，Sports = 0。

下面的代码似乎可以工作，除非列表与上面的列表类似。在这种情况下，它分配 The News = 3 及其父级 = 2（体育）。出于某种原因，遍历项目（子项）最终会到达<ul>，即使它直接在打开的<li> 之后。

我发现除了一个 jQuery 解决方案之外的所有解决方案都忽略了深度，即使这样，我也需要实际父节点的 ID（我目前根据我是否降级将其保存在堆栈中）。

为什么会发生这种情况，如何修改我的代码以递归地遍历列表？

var count = 0;
var pages = [];
var parentStack = [];

            function createNewLevel(items) {
                var length = items.length;
                for (var i = 0; i < length; i++) {

                    if (items[i].tagName == 'UL') {

                        parentStack.push(count);
                        createNewLevel($(items[i]).children().get());
                        parentStack.pop();

                    } else {
                        ++count;
                        pages.push({
                            pId: parentStack[parentStack.length - 1],
                            urlStr: $(items[i]).attr('id'), myId: count
                        });
                    }
                }

            }

            createNewLevel($('#sortableSitemap ul').get());

            console.log(pages);

更新：这是一个jsFiddle，显示代码不如何工作（“The News”应该有“World”作为其父节点）。 p>

Answer 1

我已经修改了您的原始代码。这应该适用于嵌套列表的所有组合。我没有使用 children().get()，而是使用了原生 JS 子方法。它将遍历列表中的所有内容，但忽略元素，除非它们是 <li> 或 <ul>。祝你好运。

            var count = 0;
            var pages = [];
            var parentStack = [];

            var result = {};

            parentStack.push(0);

            function createNewLevel(obj) {
                var obj = obj || document.getElementById('sortableSitemap');

                if (obj.tagName == 'LI') {
                    ++count;
                    pages.push({
                        pId: parentStack[parentStack.length - 1],
                        urlStr: obj.id, myId: count
                    });
                }

                if (obj.hasChildNodes()) {
                    var child = obj.firstChild;
                    while (child) {
                        if (child.nodeType === 1) {

                            if (child.tagName == 'UL') {
                                parentStack.push(count);
                            }

                            createNewLevel(child);

                            if (child.tagName == 'UL') {
                                parentStack.pop();
                            }
                        }
                        child = child.nextSibling;
                    }
                }
            }

            createNewLevel();