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（root为0）。因此，父ID将是：World = 0，The News = 1，Sports = 0。

下面的代码似乎有效，除非列表如上所示。在这种情况下，它指定新闻= 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”作为其父节点）。

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();

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

1 个答案: