如何使用以下对象构建多级导航。
var obj = {
1:{
title: "title1",
link: "link1"
},
2:{
title: "title2",
link: "link2",
1:{
title: "title21",
link: "link21"
},
2:{
title: "title22",
link: "link22"
}
}
}
我能够得到下面的结果,但我得到双倍,因为每个对象内部的两个对象属性。
function menuWalker(obj) {
var html = '<ul>';
for (var property in obj){
if (obj.hasOwnProperty(property)) {
html += '<li>';
console.log(obj[property]);
if (typeof obj[property] == "object"){
html += '<a href="' + obj[property].link + '">' + obj[property].title + '</a>';
html += menuWalker(obj[property]);
}else{
html += '<a href="' + obj.link + '">' + obj.title + '</a>';
}
html += '</li>';
}
}
html += '</ul>';
return html;
}
当前Html结果:
- title1
- title1
- title1
- title2
- title21
- title21
- title21
- title22
- title22
- title22
- title2
- title2
- title21
如果您可以控制导航数据的结构,我建议如下。通过这种方式,您可以明确定义导航项是否有子项,并使所有内容更清晰。
数据var obj = [
{
title: "title1",
link: "link1",
children: []
},
{
title: "title2",
link: "link2",
children: [
{
title: "title21",
link: "link21"
},
{
title: "title22",
link: "link22"
}
]
}
];
沃克function menuWalker(obj) {
var html = '<ul>';
for (var property in obj){
if (obj.hasOwnProperty(property)) {
html += '<li>';
html += '<a href="' + obj[property].link + '">' + obj[property].title + '</a>';
if (obj[property].children && obj[property].children.length > 0){
html += menuWalker(obj[property].children);
}
html += '</li>';
}
}
html += '</ul>';
return html;
}
如果你已经控制了导航数据的结构,你就可以实现Nerdwood的答案。
但如果你没有控制,你可以试试:
沃克function menuWalker(obj) {
var html = '<ul>';
for (var property in obj) {
if (obj.hasOwnProperty(property) && typeof obj[property] == "object") {
html += '<li>' + childrenMenuWalker(obj[property]) + '</li>';
}
}
html += '</ul>';
return html;
}
function childrenMenuWalker(obj) {
var html = '';
if (obj.hasOwnProperty('title') && obj.hasOwnProperty('link')) {
html += '<a href="' + obj.link + '">' + obj.title + '</a>';
}
var hasChildren = false;
var childrenHtml = '<ul>';
for (var property in obj) {
if (obj.hasOwnProperty(property) && typeof obj[property] == "object") {
hasChildren = true;
childrenHtml += '<li>' + childrenMenuWalker(obj[property]) + '</li>';
}
}
childrenHtml += '</ul>';
if (hasChildren) {
html += childrenHtml;
}
return html;
}