从数据对象创建嵌套 UL 列表

Question

我正在尝试从 JSON 创建嵌套 UL。我能够循环并从对象中获取数据，但在构建嵌套 UL 时遇到问题。我认为“.append”方法放置在错误的位置。生成的 LI 全部分组在一起。如何创建一个循环（或者其他方法也可以）来构建 UL 并正确嵌套子菜单 LI？我尝试过使用其他类似的帖子来解决我的问题，但我似乎无法使其对我的数据和代码有意义。有点脑残——我尝试了几种方法来创建这个动态列表，但到目前为止还没有成功。如有任何帮助，我们将不胜感激:)

我的 JSON 数据嵌套了 3 层。我需要创建一个带有子菜单的菜单......

数据：

var menu = 
[
    {
        title: "Best Known For",
        menuCaption: "Best Known For Caption",
        url: "/best-known-for",
        menu: [
                {
                    title: "Acting",
                    menuCaption: "Acting",
                    url: "",
                    menu: [
                            {
                                title: "Stage",
                                url: "/"
                            },       
                            {
                                title: "Screen",
                                url: "/"
                            },       
                            {
                                title: "Acting Three",
                                url: "/"
                            },       
                            {
                                title: "Acting Four",
                                url: "/"
                            },       
                            {
                                title: "Acting Five",
                                url: "/"
                            },       
                            {
                                title: "Acting Six",
                                url: "/"
                            }       
                    ]
                },
                {
                    title: "Singing",
                    menuCaption: "Singing",
                    url: "",
                    menu: [
                            {
                                title: "Jazz",
                                url: "/"
                            },       
                            {
                                title: "Pop",
                                url: "/"
                            },       
                            {
                                title: "Rock",
                                url: "/"
                            },       
                            {
                                title: "Latin",
                                url: "/"
                            },       
                            {
                                title: "Singing Five",
                                url: "/"
                            },       
                            {
                                title: "Singing Six",
                                url: "/"
                            }       
                    ]
                },
                {
                    title: "Directing",
                    menuCaption: "Directing",
                    url: "",
                    menu: [
                            {
                                title: "Television",
                                url: "/"
                            },       
                            {
                                title: "Stage",
                                url: "/"
                            },       
                            {
                                title: "Screen",
                                url: "/"
                            },       
                            {
                                title: "Award Winners",
                                url: "/"
                            },       
                            {
                                title: "Directing Five",
                                url: "/"
                            },       
                            {
                                title: "Directing Six",
                                url: "/"
                            }       
                    ]
                },
                {
                    title: "Politics",
                    menuCaption: "Politics",
                    url: "",
                    menu: [
                            {
                                title: "Presidents",
                                url: "/"
                            },       
                            {
                                title: "Senators",
                                url: "/"
                            },       
                            {
                                title: "House Of Representatives",
                                url: "/"
                            },       
                            {
                                title: "Governors",
                                url: "/"
                            },       
                            {
                                title: "Mayors",
                                url: "/"
                            },       
                            {
                                title: "Other Notables in Government",
                                url: "/"
                            }       
                    ]
                }
        ]
    },{
        title: "Life Events",
        menuCaption: "Choose a life Event",
        url: "/life-events",
        menu: [
                {
                    title: "Arrested",
                    menuCaption: "Arrested",
                    url: "",
                    menu: [
                            {
                                title: "Drug Possession",
                                url: "/"
                            },       
                            {
                                title: "Prostitution",
                                url: "/"
                            },       
                            {
                                title: "Tax Evasion",
                                url: "/"
                            },       
                            {
                                title: "Murder",
                                url: "/"
                            },       
                            {
                                title: "Rape",
                                url: "/"
                            },       
                            {
                                title: "Grand Theft",
                                url: "/"
                            }       
                    ]
                },
                {
                    title: "Awards",
                    menuCaption: "Awards",
                    url: "",
                    menu: [
                            {
                                title: "Academy Award",
                                url: "/"
                            },       
                            {
                                title: "Tony",
                                url: "/"
                            },       
                            {
                                title: "People's Choice",
                                url: "/"
                            },       
                            {
                                title: "Emmy",
                                url: "/"
                            },       
                            {
                                title: "Sag Award",
                                url: "/"
                            },       
                            {
                                title: "Lifetime Achievement",
                                url: "/"
                            }       
                    ]
                },
                {
                    title: "Charity Work",
                    menuCaption: "Charity Work",
                    url: "",
                    menu: [
                            {
                                title: "HIV/Aids",
                                url: "/"
                            },       
                            {
                                title: "Cerebral Palsy",
                                url: "/"
                            },       
                            {
                                title: "Spinal Cord Injury",
                                url: "/"
                            },       
                            {
                                title: "Breast Cancer",
                                url: "/"
                            },       
                            {
                                title: "Homelessness",
                                url: "/"
                            },       
                            {
                                title: "Orphans",
                                url: "/"
                            }       
                    ]
                },
                {
                    title: "Crime Victim",
                    menuCaption: "Crime Victim",
                    url: "",
                    menu: [
                            {
                                title: "Rape",
                                url: "/"
                            },       
                            {
                                title: "Murder",
                                url: "/"
                            },       
                            {
                                title: "Home Invasion",
                                url: "/"
                            },       
                            {
                                title: "Assault",
                                url: "/"
                            },       
                            {
                                title: "Identity Fraud",
                                url: "/"
                            },       
                            {
                                title: "Some Other Crime",
                                url: "/"
                            }       
                    ]
                },
                {
                    title: "Death",
                    menuCaption: "Death",
                    url: "",
                    menu: [
                            {
                                title: "Suicide",
                                url: "/"
                            },       
                            {
                                title: "Homocide",
                                url: "/"
                            },       
                            {
                                title: "Cancer",
                                url: "/"
                            },       
                            {
                                title: "Accident",
                                url: "/"
                            },       
                            {
                                title: "Heart Attack",
                                url: "/"
                            },       
                            {
                                title: "Stroke",
                                url: "/"
                            }       
                    ]
                },
                {
                    title: "Disappeared",
                    menuCaption: "Disappeared",
                    url: "",
                    menu: [
                            {
                                title: "Disappeared One",
                                url: "/"
                            },       
                            {
                                title: "Disappeared Two",
                                url: "/"
                            },       
                            {
                                title: "Disappeared Three",
                                url: "/"
                            },       
                            {
                                title: "Disappeared Four",
                                url: "/"
                            },       
                            {
                                title: "Disappeared Five",
                                url: "/"
                            },       
                            {
                                title: "Disappeared Six",
                                url: "/"
                            }       
                    ]
                },
                {
                    title: "Discovery",
                    menuCaption: "Discovery",
                    url: "",
                    menu: [
                            {
                                title: "New Land",
                                url: "/"
                            },       
                            {
                                title: "New Medicine",
                                url: "/"
                            },       
                            {
                                title: "New Species",
                                url: "/"
                            },       
                            {
                                title: "New Planet",
                                url: "/"
                            },       
                            {
                                title: "New Star",
                                url: "/"
                            },       
                            {
                                title: "New Something Else",
                                url: "/"
                            }       
                    ]
                },
                {
                    title: "Divorced",
                    menuCaption: "Divorced",
                    url: "",
                    menu: [
                            {
                                title: "Divorced One",
                                url: "/"
                            },       
                            {
                                title: "Divorced Two",
                                url: "/"
                            },       
                            {
                                title: "Divorced Three",
                                url: "/"
                            },       
                            {
                                title: "Divorced Four",
                                url: "/"
                            },       
                            {
                                title: "Divorced Five",
                                url: "/"
                            },       
                            {
                                title: "Divorced Six",
                                url: "/"
                            }       
                    ]
                },
                {
                    title: "Fame",
                    menuCaption: "Fame",
                    url: "",
                    menu: [
                            {
                                title: "Singing",
                                url: "/"
                            },       
                            {
                                title: "Dancing",
                                url: "/"
                            },       
                            {
                                title: "Acting",
                                url: "/"
                            },       
                            {
                                title: "Politics",
                                url: "/"
                            },       
                            {
                                title: "Activist",
                                url: "/"
                            },       
                            {
                                title: "Infamous",
                                url: "/"
                            }       
                    ]
                },
                {
                    title: "Heroic Act",
                    menuCaption: "Heroic Act",
                    url: "",
                    menu: [
                            {
                                title: "Heroic Act One",
                                url: "/"
                            },       
                            {
                                title: "Heroic Act Two",
                                url: "/"
                            },       
                            {
                                title: "Heroic Act Three",
                                url: "/"
                            },       
                            {
                                title: "Heroic Act Four",
                                url: "/"
                            },       
                            {
                                title: "Heroic Act Five",
                                url: "/"
                            },       
                            {
                                title: "Heroic Act Six",
                                url: "/"
                            }       
                    ]
                },
                {
                    title: "Illness",
                    menuCaption: "Illness",
                    url: "",
                    menu: [
                            {
                                title: "Cancer",
                                url: "/"
                            },       
                            {
                                title: "HIV/Aids",
                                url: "/"
                            },       
                            {
                                title: "Schizophrenia",
                                url: "/"
                            },       
                            {
                                title: "OCD",
                                url: "/"
                            },       
                            {
                                title: "Anorexia/Bulimia",
                                url: "/"
                            },       
                            {
                                title: "Multiple Sclerosis",
                                url: "/"
                            }       
                    ]
                },
                {
                    title: "Incarcerated",
                    menuCaption: "Incarcerated",
                    url: "",
                    menu: [
                            {
                                title: "Incarcerated One",
                                url: "/"
                            },       
                            {
                                title: "Incarcerated Two",
                                url: "/"
                            },       
                            {
                                title: "Incarcerated Three",
                                url: "/"
                            },       
                            {
                                title: "Incarcerated Four",
                                url: "/"
                            },       
                            {
                                title: "Incarcerated Five",
                                url: "/"
                            },       
                            {
                                title: "Incarcerated Six",
                                url: "/"
                            }       
                    ]
                },
                {
                    title: "Killed",
                    menuCaption: "Killed",
                    url: "",
                    menu: [
                            {
                                title: "Shot",
                                url: "/"
                            },       
                            {
                                title: "Stabbed",
                                url: "/"
                            },       
                            {
                                title: "Beaten",
                                url: "/"
                            },       
                            {
                                title: "Suicide",
                                url: "/"
                            },       
                            {
                                title: "Strangled",
                                url: "/"
                            },       
                            {
                                title: "Accident",
                                url: "/"
                            }       
                    ]
                },
                {
                    title: "Kidnapped",
                    menuCaption: "Kidnapped",
                    url: "",
                    menu: [
                            {
                                title: "Kidnapped One",
                                url: "/"
                            },       
                            {
                                title: "Kidnapped Two",
                                url: "/"
                            },       
                            {
                                title: "Kidnapped Three",
                                url: "/"
                            },       
                            {
                                title: "Kidnapped Four",
                                url: "/"
                            },       
                            {
                                title: "Kidnapped Five",
                                url: "/"
                            },       
                            {
                                title: "Kidnapped Six",
                                url: "/"
                            }       
                    ]
                },
                {
                    title: "Military Service",
                    menuCaption: "Military Service",
                    url: "",
                    menu: [
                            {
                                title: "Army",
                                url: "/"
                            },       
                            {
                                title: "Navy",
                                url: "/"
                            },       
                            {
                                title: "Air Force",
                                url: "/"
                            },       
                            {
                                title: "Marines",
                                url: "/"
                            },       
                            {
                                title: "National Guard",
                                url: "/"
                            },       
                            {
                                title: "Coast Guard",
                                url: "/"
                            }       
                    ]
                },
                {
                    title: "Parenthood",
                    menuCaption: "Parenthood",
                    url: "",
                    menu: [
                            {
                                title: "Adoption",
                                url: "/"
                            },       
                            {
                                title: "Surrogacy",
                                url: "/"
                            },       
                            {
                                title: "Multiples/Twins",
                                url: "/"
                            },       
                            {
                                title: "Mothers",
                                url: "/"
                            },       
                            {
                                title: "Fathers",
                                url: "/"
                            },       
                            {
                                title: "Odd Baby Names",
                                url: "/"
                            }       
                    ]
                },
                {
                    title: "Product Launch",
                    menuCaption: "Product Launch",
                    url: "",
                    menu: [
                            {
                                title: "Fashion",
                                url: "/"
                            },       
                            {
                                title: "Food",
                                url: "/"
                            },       
                            {
                                title: "Technology",
                                url: "/"
                            },       
                            {
                                title: "Automotive",
                                url: "/"
                            },       
                            {
                                title: "Architecture",
                                url: "/"
                            },       
                            {
                                title: "Product Launch Six",
                                url: "/"
                            }       
                    ]
                },
                {
                    title: "Scandal",
                    menuCaption: "Scandal",
                    url: "",
                    menu: [
                            {
                                title: "Sex Tape",
                                url: "/"
                            },       
                            {
                                title: "Domestic Violence",
                                url: "/"
                            },       
                            {
                                title: "Fraud",
                                url: "/"
                            },       
                            {
                                title: "Drug Abuse",
                                url: "/"
                            },       
                            {
                                title: "Adultery",
                                url: "/"
                            },       
                            {
                                title: "Arrested",
                                url: "/"
                            }       
                    ]
                },
                {
                    title: "Wealth",
                    menuCaption: "Wealth",
                    url: "",
                    menu: [
                            {
                                title: "Top 10 List",
                                url: "/"
                            },       
                            {
                                title: "Richest Women",
                                url: "/"
                            },       
                            {
                                title: "Richest Men",
                                url: "/"
                            },       
                            {
                                title: "Billionaires",
                                url: "/"
                            },       
                            {
                                title: "Self Made",
                                url: "/"
                            },       
                            {
                                title: "Lottery Winners",
                                url: "/"
                            }       
                    ]
                },
                {
                    title: "World Record",
                    menuCaption: "World Record",
                    url: "",
                    menu: [
                            {
                                title: "Tallest",
                                url: "/"
                            },       
                            {
                                title: "Shortest",
                                url: "/"
                            },       
                            {
                                title: "Oldest",
                                url: "/"
                            },       
                            {
                                title: "Fastest",
                                url: "/"
                            },       
                            {
                                title: "World Record Five",
                                url: "/"
                            },       
                            {
                                title: "World Record Six",
                                url: "/"
                            }       
                    ]
                }
        ]
    },




    {
        title: "Date",
        menuCaption: "Date",
        url: "/date",
        menu: []
    },



    {
        title: "Industry",
        menuCaption: "Industry",
        url: "/industry",
        menu: []
    },



    {
        title: "Nationality",
        menuCaption: "Nationality",
        url: "/nationality",
        menu: []
    }




];

我构建循环来访问所有嵌套菜单数据：

var mainMenu = $("#test ul.mainMenu");
var subMenuL1 = $("#test ul.mainMenu ul.submenuLevel1");
var subMenuL2 = $("#test ul.mainMenu ul.submenuLevel1 ul.submenuLevel2");
var i, j, k, navItem, navItemLevel1, navItemLevel2;



for(var i = 0; i < menu.length; i++){
    var navItem = menu[i];
    mainMenu.append('<li class="main"><a href="' + navItem.url + '">' + navItem.title +' </a></li>');

        for(var j = 0; j < menu[i].menu.length; j++){
            var navItemLevel1 = navItem.menu[j];
            subMenuL1.append('<li class="level1"><a href="' + navItemLevel1.url + '">' + navItemLevel1.title +' </a></li>');

                for(var k = 0; k < menu[i].menu[j].menu.length; k++){
                    var navItemLevel2 = navItemLevel1.menu[k];
                    subMenuL2.append('<li class="level2"><a href="' + navItemLevel2.url + '">' + navItemLevel2.title +' </a></li>');
                }
        }
};

HTML 容器：

<div id="test">
    <ul class="mainMenu">
        <li>
            <ul class="submenuLevel1">
                <li>
                    <ul class="submenuLevel2">
                        <li></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

Answer 1

这是一个更好的解决方案：

var Menu = function(data) {
    this.data = data; 
};

Menu.prototype.render = function(root) {
    var ul = $("<ul></ul>");
    var li = $("<li></li>");
    li.append($("<a></a>", {
        href: this.data.url,
        text: this.data.title
    })).appendTo(ul);
    ul.appendTo(root);
    if (this.data.menu) {
        Menu.renderMenus(this.data.menu, $("<li></li>").appendTo(ul));
    }
};

Menu.renderMenus = function(menus, root) {
    $.each(menus, function(key, val) {
        var m = new Menu(val);
        m.render(root);
    });
}

Menu.renderMenus(menu, $("#container"));

实例

Answer 2

您可以使用递归函数来附加子菜单。

这是三个或更多子级别的简单解决方案

function appendMeu(parent, menu, level) {
    for(var i = 0;i < menu.length; i ++) {
        var submenu = parent.append('<li>' + menu[i].title + '</li>')
            .find("li:last");

        if(menu[i].menu != undefined && menu[i].menu.length > 0) {
            submenu = submenu.append('<ul class="submenuLevel' + (level + 1) + '"></ul>').find("ul");
            appendMeu(submenu, menu[i].menu, level + 1);
        }
    }
}

$(function() {
    appendMeu($(".mainMenu"), menu, 0);
});

Answer 3

这是一个解决方案：

var mainMenu = $("#test ul.mainMenu");
var i, j, k, navItem, navItemLevel1, navItemLevel2;

for(var i = 0; i < menu.length; i++){
    var navItem = menu[i];
    var new_li = $('<li class="main"><a href="' + navItem.url + '">' + navItem.title +' </a></li>');
    mainMenu.append(new_li);

        for(var j = 0; j < menu[i].menu.length; j++){
            var new_li_ul = $('ul.submenuLevel1', new_li);
            if(new_li_ul.length <= 0){
                new_li_ul  = $('<ul class="submenuLevel1"></ul>');
                new_li.append(new_li_ul);
            } 
            var navItemLevel1 = navItem.menu[j];
            var new_li_li = $('<li class="level1"><a href="' + navItemLevel1.url + '">' + navItemLevel1.title +' </a></li>');
            new_li_ul.append(new_li_li);

                for(var k = 0; k < menu[i].menu[j].menu.length; k++){
                    var new_li_ul_ul = $('ul.submenuLevel2', new_li_li);
                    if(new_li_ul_ul.length <= 0){
                        new_li_ul_ul = $('<ul class="submenuLevel2"></ul>');
                        new_li_li.append(new_li_ul_ul);
                    } 
                    var navItemLevel2 = navItemLevel1.menu[k];
                    new_li_ul_ul.append('<li class="level2"><a href="' + navItemLevel2.url + '">' + navItemLevel2.title +' </a></li>');
                }
        }
};

这是一个小提琴： http://jsfiddle.net/maniator/6JnuG/3/

Answer 4

您制作的大部分内容都是动态的，因此从这样的内容开始

<div id="test">
    <ul class="mainMenu">
    </ul>
</div>

然后在代码中使用您刚刚制作的内容并添加到其中。像这样的东西：

for(var i = 0; i < menu.length; i++){
    var navItem = menu[i];
    subMenuL1 = mainMenu.append('<li class="main"><a href="' + navItem.url + '">' + navItem.title +' </a></li>');

        for(var j = 0; j < menu[i].menu.length; j++){
            var navItemLevel1 = navItem.menu[j];
            subMenuL2 = subMenuL1.append('<li class="level1"><a href="' + navItemLevel1.url + '">' + navItemLevel1.title +' </a></li>');

                for(var k = 0; k < menu[i].menu[j].menu.length; k++){
                    var navItemLevel2 = navItemLevel1.menu[k];
                    subMenuL2.append('<li class="level2"><a href="' + navItemLevel2.url + '">' + navItemLevel2.title +' </a></li>');
                }
        }
};

注意：我根本没有测试......只是查看了示例代码并做了一些更改以使您朝着正确的方向前进。

Answer 5

以下是如何使用我提到的 jQuery 模板插件 来执行此操作，

这将在您的脚本标记中

$(function () {
    $('#t_menu').tmpl(menu).appendTo('#test');
});

：你的html：

<div id="test">  </div> 

<script id="t_menu" type="text/html">
   <ul class="mainMenu">
   {{each menu}} 
        <li class="main">
            <a href="${url}">${title}</a>            
            <ul class="submenuLevel1">
            {{each menu}}
                <li class="level1">                    
                    <a href="${url}">${title}</a>            
                    <ul class="submenuLevel2">
                    {{each menu}}
                        <li class="level2">
                            <a href="${url}">${title}</a>
                        </li>
                    {{/each}}
                    </ul>                
                </li>
            {{/each}}
            </ul>        
        </li>    
    {{/each}}
    </ul>
</script>