列出JS对象数组
列出JS对象数组
提问于 2017-01-19 15:04:03
我在js中有一个数组，就像这样
menu = [
{
name: 'Item1',
//submenuName: 'submenu-1',
},
{
name: 'Item2',
submenuName: 'submenu-2',
sub: [
{
name: 'Item2_1',
//submenuName: '',
},
{
name: 'Item2_2',
//submenuName: '',
},
{
name: 'Item2_3',
//submenuName: '',
}
]
},
{
name: 'Item3',
//submenuName: 'submenu-3',
}
]我需要在ul标签中列出它们，但是每一层都必须在另一层之前关闭。
<ul data-menu="main">
<li data-submenu>Item1</li>
<li data-submenu='submenu-2'>Item2</li>
<li data-submenu>Item3</li>
</ul>
<ul data-menu="submenu-2">
<li data-submenu>Item2_1</li>
<li data-submenu>Item2_2</li>
<li data-submenu>Item2_3</li>
</ul>诸若此类。我已经设法打印了它们，但只打印了第一层。不能打印下级！
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-01-19 15:38:04
如果菜单需要一个接一个地列出而不是嵌套，则在打印父菜单时维护一个菜单数组以打印并用子菜单填充该数组。
既然你提到了你正在使用jQuery，下面就是一个使用这个库的例子。
function generateMenu (menu, container) {
var menus = [{name: 'main', entries: menu}];
while (menus.length) {
var current = menus.shift();
var ul = $("<ul />").attr('data-menu', current.name);
$.each(current.entries, function (index, menuItem) {
var li = $('<li />')
.attr('data-submenu', menuItem.submenuName || '')
.text(menuItem.name);
if ($.isArray(menuItem.sub)) {
menus.push({name: menuItem.submenuName, entries: menuItem.sub});
}
li.appendTo(ul);
});
ul.appendTo(container);
}
}
generateMenu(menu, $('body'));页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41735694
复制相关文章
相似问题
腾讯云开发者
