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

我正在尝试从JSON创建嵌套的UL。 我能够遍历并从对象中获取数据，但是我在构建嵌套的UL时遇到了问题。 我认为’.append’方法放在错误的位置。 生成的LI全部组合在一起。 我如何创建一个循环（或其他方式也很好），将构建UL与子菜单LI正确嵌套？ 我曾尝试使用其他类似的post来解决我的问题，但我似乎无法通过我的数据和代码使它变得有意义。 一个小脑卒中 – 我尝试了一些方法来创建这个动态列表，到目前为止还没有一个成功。 任何帮助，将不胜感激 ：）

我的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('
  • ' + navItem.title +' 
    • '); for(var j = 0; j < menu[i].menu.length; j++){ var navItemLevel1 = navItem.menu[j]; subMenuL1.append('
  • ' + navItemLevel1.title +' 
    • '); for(var k = 0; k < menu[i].menu[j].menu.length; k++){ var navItemLevel2 = navItemLevel1.menu[k]; subMenuL2.append('
  • ' + navItemLevel2.title +' 
    • '); } } };

    HTML容器： 

     
     
       
    •  
         
      •  
           
        •  
         
        •  
       
      •

    这是一个解决方案： 

     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 = $('
  • ' + navItem.title +' 
    • '); 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 = $('
      '); new_li.append(new_li_ul); } var navItemLevel1 = navItem.menu[j]; var new_li_li = $('
    • ' + navItemLevel1.title +' 
      • '); 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 = $('
        '); new_li_li.append(new_li_ul_ul); } var navItemLevel2 = navItemLevel1.menu[k]; new_li_ul_ul.append('
      • ' + navItemLevel2.title +' 
        • '); } } };

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

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

         var Menu = function(data) { this.data = data; }; Menu.prototype.render = function(root) { var ul = $("
          "); var li = $("
        • "); li.append($("", { href: this.data.url, text: this.data.title })).appendTo(ul); ul.appendTo(root); if (this.data.menu) { Menu.renderMenus(this.data.menu, $("
        • ").appendTo(ul)); } }; Menu.renderMenus = function(menus, root) { $.each(menus, function(key, val) { var m = new Menu(val); m.render(root); }); } Menu.renderMenus(menu, $("#container"));

          实例

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

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

           function appendMeu(parent, menu, level) { for(var i = 0;i < menu.length; i ++) { var submenu = parent.append('
        • ' + menu[i].title + '
          • ') .find("li:last"); if(menu[i].menu != undefined && menu[i].menu.length > 0) { submenu = submenu.append('
            ').find("ul"); appendMeu(submenu, menu[i].menu, level + 1); } } } $(function() { appendMeu($(".mainMenu"), menu, 0); });

            你做的大部分都是动态的，所以从这样的事情开始

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

             for(var i = 0; i < menu.length; i++){ var navItem = menu[i]; subMenuL1 = mainMenu.append('
          • ' + navItem.title +' 
            • '); for(var j = 0; j < menu[i].menu.length; j++){ var navItemLevel1 = navItem.menu[j]; subMenuL2 = subMenuL1.append('
          • ' + navItemLevel1.title +' 
            • '); for(var k = 0; k < menu[i].menu[j].menu.length; k++){ var navItemLevel2 = navItemLevel1.menu[k]; subMenuL2.append('
          • ' + navItemLevel2.title +' 
            • '); } } };

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

            以下是我提到的jQuery模板插件的使用方法

            这将在您的脚本标记中： 

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

            这在你的HTML中：
            Interesting Posts

            jQuery查找浮动li中每行的项目数

            JQuery隐藏了UL，只扩展了一次特定的类集（像手风琴一样）

            根据破折号’ – ‘将li分组为ul

            使用jQuery将WordPresspost附件移动到每个post动态创建的列表？

            jQuery – 如何动态地将列表项添加到无序列表？

            如何使用jquery在一个页面中获取所有标签的内容

            jQuery：为什么li元素上的click事件不起作用？

            如何从.ajax GET的结果中添加可拖动的列表项？

            按下向下箭头按下列表项

            一个UL列表拆分为具有固定高度的多列