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

Question

我有一个简单的 html 元素代码，包括 <div>, <ul>, <li>, <img>, <and> and <spawn> 并通过使用 css 我创建了一个菜单，悬停时显示子列表。
因此，由于 html 代码变得太大，我决定使用 jQuery 和 javascript array with objects inside 动态创建菜单，但我的代码出了点问题，只有当我有 1 个子菜单时才有效.但是当我尝试将子菜单放入其他子菜单时，浏览器上什么也没有出现

每个 <li> 如果只有 1 个 <div> 里面没有子菜单，如果有第二个 <div> 这意味着有具有相同循环的子菜单
我当前的 html 代码如下所示：

<nav  class="navigation">
    <ul>
        <li>
            <div>
                <img src="files/img/nav/aaa.png"/>
                <span>Item 1</span>
            </div>
            <div>
                <ul>
                    <li>
                        <div>
                            <img src="files/img/nav/aaa.png"/>
                            <span>Sub-item 1</span>
                        </div>
                    </li>
                </ul>
            </div>
        </li>
        <li>
            <div>
                <img src="files/img/nav/aaa.png"/>
                <span>Item 2</span>
            </div>
        </li>
    </ul>
</nav>

我尝试使用以下 jQuery 代码和这样的数组生成我想要的项目，但我失败了：

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

我应该如何更改我的代码以适用于任意数量的下层子列表？？？

这是一个带有 1 个子列表的有效 jsfiddle 代码：https://jsfiddle.net/za6bj2vs/

Answer 1

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

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

因此它们在递归和回溯时被覆盖。这会产生不良结果；事实上，它让 $div2.append($subUl); 做了一些灾难性的事情：因为 $div2 同时被递归调用改变了，这实际上试图附加一个作为 $div2 的父元素的元素，所以jQuery ...放弃。

只需使用 var 就可以了：

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

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

How to create any number of sublists using jQuery and Javascript array with objects?

jquery

html

dynamic

sublist