JavaScript创建可变深度的分层列表

Question

我有一个类别列表，每个类别都有一组children类别，它们本身可以包含children类别。 我正在尝试创建类别列表，每个类别还包含其子项的子列表。

我的HTML只是顶级列表的容器：

<ul id="categories"></ul>

然后我有以下Javascript：

function addCategories($list, cats) {
        $.each(cats, function(i, cat) {
                $item = $('<li><a href="#">' + cat.name + '</a></li>');

                if(cat.children.length) {
                        $subList = $('<ul></ul>');
                        $item.append($subList);
                        addCategories($subList, cat.children);
                }

                $list.append($item);
        });
}

var categories = [
    {
        "name": "Category 1",
        "children": []
    },
    {
        "name": "Category 2",
        "children": [
            {
                "name": "Subcategory 2",
                "children": [
                    {
                        "name": "Subsubcategory 2",
                        "children": []
                    }
                 ]
            }
         ]
    },
    {
        "name": "Category 3",
        "children":[]
    }
];

$(function() {
   addCategories($('#categories'), categories); 
});

我想看到的是：

<ul id="categories">
    <li>
        <a href="#">Category 1</a>
    </li>
    <li>
        <a href="#">Category 2</a>
        <ul>
            <li>
                <a href="#">Subcategory 2</a>
                <ul>
                    <li>
                        <a href="#">Subsubcategory 2</a>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
    <li>
        <a href="#">Category 3</a>
    </li>
</ul>

但是，相反，我看到了：

<ul id="categories">
    <li>
        <a href="#">Category 1</a>
    </li>
    <li>
        <a href="#">Subsubcategory 2</a>
    </li>
    <li>
        <a href="#">Category 3</a>
    </li>
</ul>

这是一个小提琴： http : //jsfiddle.net/qacf2mn6/

我究竟做错了什么？

Answer 1

弄清楚了。 我缺少var声明，因此没有重置变量。

这是正确的js代码：

function addCategories($list, cats) {
        _.each(cats, function(cat) {
                var $item = $('<li><a href="#">' + cat.name + '</a></li>');

                if(cat.children.length) {
                        var $subList = $('<ul></ul>');
                        $item.append($subList);
                        addCategories($subList, cat.children);
                }

                $list.append($item);
        });
}