javascript中的递归列表生成器函数

Recursive list generator function in javascript

本文关键字：函数列表递归 javascript 更新时间：2023-12-28

我在这里设置了一个小提琴。

下面的代码从对象生成一个html列表

function generateList(data, $e) {
    // create an inner item
    function createInner(obj) {
        var li = $('<li>');
        li.text(obj.text);
        if (obj.children != undefined && obj.children.length > 0) {
            innerList = $('<ul>');
            for (var i = 0; i < obj.children.length; i++) {
                var child = obj.children[i];
                innerList.append(createInner(child));
            };
            li.append(innerList);
        }
        return li;
    }
    for (var i = 0; i < data.length; i++) {
        $e.append(createInner(data[i]));
    }
}

以下数据集已被用作示例-

[
    {
        "text": "item1"
    },
    {
        "text": "item2",
        "children": [
            {
                "text": "subItem",
            },
            {
                "text": "another subItem",
            },
            {
                "text": "last subItem",
            }
        ],
    },
    {
        "text": "item3",
        "children": [
            {
                "text": "Hello",
            },
            {
                "text": "Inner List",
                "children": [
                    {
                        "text": "innerItem1",
                    },
                    {
                        "text": "innerItem2",
                    }
                ]
            },
            {
                "text": "Bye",
            }
        ],
    }
]

写有item3的列表项应该有一个包含另外两个子项的内部列表，但它没有发生。标记为Inner List的项目未显示在html输出中。标记为Hello的项目也不是。item3仅包含innerItem1、innerItem2和Bye。

我该如何克服这一点？

您的递归函数可以使用两个参数，而不是尝试递归地追加返回的结果。要添加的数据节点和要添加结果的父元素。然后，它们将与任何深度并行工作：

JSFiddle:http://jsfiddle.net/TrueBlueAussie/r69ex6k3/3/

function generateList(data, $e) {
    // create an inner item
    function createInner(obj, $target) {
        var li = $('<li>').appendTo($target);
        li.text(obj.text);
        if (obj.children != undefined && obj.children.length > 0) {
            var innerList = $('<ul>').appendTo(li);
            for (var i = 0; i < obj.children.length; i++) {
                var child = obj.children[i];
                createInner(child, innerList);
            };
        }
    }
    for (var i = 0; i < data.length; i++) {
        createInner(data[i], $e);
    }
}

生成的HTML如下所示：

<ul class="sample">
    <li>item1</li>
    <li>item2
        <ul>
            <li>subItem</li>
            <li>another subItem</li>
            <li>last subItem</li>
        </ul>
    </li>
    <li>item3
        <ul>
            <li>Hello</li>
            <li>Inner List
                <ul>
                    <li>innerItem1</li>
                    <li>innerItem2</li>
                </ul>
            </li>
            <li>Bye</li>
        </ul>
    </li>
</ul>

您遇到了一个变量问题，其中innerList是全局变量。始终在作用域的开头定义变量。(http://javascript.crockford.com/code.html#variable%20declarations)

答案如下：JSFiddle：http://jsfiddle.net/r69ex6k3/5/

只需要稍微清理一下函数（createInner）

function createInner(obj) {
        var li = $('<li>'),
            innerList,
            child;
        li.text(obj.text);
        if (obj.children && obj.children.length) {
            innerList = $('<ul>');
            for (var i = 0; i < obj.children.length; i++) {
                child = obj.children[i];
                innerList.append(createInner(child));
            };
            li.append(innerList);
        }
        return li;
    }