如何使用jQuery和带有对象的Javascript数组创建任意数量的子列表？

我有一个简单的

html

元素代码，包括

，
，
，
问题是您对以下两个变量使用了全局变量：

var menuData = [
    {
        "image": "files/img/nav/aaa.png",
        "text": "Item 1",
        "subMenu": [
            {
                "image": "files/img/nav/aaa.png",
                "text": "Sub-item 1",
                "subMenu": [
                    {
                        "image": "files/img/nav/aaa.png",
                        "text": "Sub-item 1.1",
                        "subMenu": []
                    }
                ]
            }
        ]
    },
    {
        "image": "files/img/nav/aaa.png",
        "text": "Item 2",
        "subMenu": []
    }
];

$(document).ready(function(){
    function createSubMenu(arrayData){
        var elementsArray = [];
        var $ul = $('<ul/>');
        $.each(arrayData, function(index, value){
            var $li = $('<li/>');
            var $div = $('<div/>');
            var $img = $('<img/>', {'src': arrayData[index].image } );
            var $span = $('<span/>', {'text': arrayData[index].text});
            $div.append($img, $span);
            $li.append($div);
            if(arrayData[index].subMenu.length){
                $div2 = $('<div/>');
                $subUl = createSubMenu(arrayData[index].subMenu);
                $div2.append($subUl);
                $li.append($div2);
            }
            elementsArray.push($li);
        });
        $.each(elementsArray, function(index, value){
            $ul.append(value);

        });
        return $ul;
    }

    $ul = createSubMenu(menuData);
    $('.navigation').append($ul);
});

var menuData = [
    {
        "image": "files/img/nav/aaa.png",
        "text": "Item 1",
        "subMenu": [
            {
                "image": "files/img/nav/aaa.png",
                "text": "Sub-item 1",
                "subMenu": [
                    {
                        "image": "files/img/nav/aaa.png",
                        "text": "Sub-item 1.1",
                        "subMenu": []
                    }
                ]
            }
        ]
    },
    {
        "image": "files/img/nav/aaa.png",
        "text": "Item 2",
        "subMenu": []
    }
];

$(document).ready(function(){
    function createSubMenu(arrayData){
        var elementsArray = [];
        var $ul = $('<ul/>');
        $.each(arrayData, function(index, value){
            var $li = $('<li/>');
            var $div = $('<div/>');
            var $img = $('<img/>', {'src': arrayData[index].image } );
            var $span = $('<span/>', {'text': arrayData[index].text});
            $div.append($img, $span);
            $li.append($div);
            if(arrayData[index].subMenu.length){
                $div2 = $('<div/>');
                $subUl = createSubMenu(arrayData[index].subMenu);
                $div2.append($subUl);
                $li.append($div2);
            }
            elementsArray.push($li);
        });
        $.each(elementsArray, function(index, value){
            $ul.append(value);

        });
        return $ul;
    }

    $ul = createSubMenu(menuData);
    $('.navigation').append($ul);
});

            $div2 = $('<div/>');
            $subUl = createSubMenu(arrayData[index].subMenu);

            var $div2 = $('<div/>');
            var $subUl = createSubMenu(arrayData[index].subMenu);