从数据对象创建嵌套的UL列表
柯昆
问题内容：
问题答案：
我正在尝试从JSON创建嵌套的UL。我能够遍历并从对象中获取数据，但是在构建嵌套UL时遇到了麻烦。我认为’.append’方法放置在错误的位置。生成的LI都分组在一起。我如何创建一个循环（或者也可以用另一种方法）来构建带有正确嵌套的子菜单LI的UL？我曾尝试使用其他类似的帖子来解决我的问题，但是我的数据和代码似乎没有任何意义。对此有些不解之举-
我尝试了几种方法来创建此动态列表，但到目前为止没有一个成功。任何帮助，将不胜感激 ：）
我的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: []
}
];
I build the loop to access all of the nested menu data:
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>');
}
}
};
The HTML container:
<div id="test">
<ul class="mainMenu">
<li>
<ul class="submenuLevel1">
<li>
<ul class="submenuLevel2">
<li></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
问题答案：
Here is a solution:
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>');
}
}
};
Here is a fiddle: http://jsfiddle.net/maniator/6JnuG/3/
类似资料：
-
我试图在spring数据中编写一个findBy，希望所有员工的第一部门状态都处于活动状态。是否可以使用spring数据方法名称，而不使用自定义查询？ 类似于List findByDepartmentFirstStatusIsActive（）； 我试了几次，但都没用，所以我想没有！！！
-
问题内容： 我有一个其中嵌套了数据类对象的数据类对象。但是，当我创建主对象时，嵌套的对象会变成字典： 如您所见，我试图将所有数据作为字典传递，但没有得到预期的结果。然后，我尝试先构造嵌套对象，然后将其传递给对象构造函数，但得到的结果相同。 理想情况下，我想构造我的对象以获得以下内容： 除了在访问对象属性时手动将嵌套字典转换为相应的数据类对象之外，还有什么方法可以实现？ 提前致谢。 问题答案： 这是
-
我有一个数据类对象，其中包含嵌套的数据类对象。但是，当我创建主对象时，嵌套的对象会变成字典： 如您所见，只有有效。 理想情况下，我想构造我的对象来获得这样的东西： 除了在访问对象属性时手动将嵌套字典转换为相应的数据类对象之外，还有别的方法可以实现这一点吗？
-
我需要创建一个嵌套数组，使用路径作为子节点的参考。例如：4.1是4岁的孩子，4.1.1是4.1岁的孩子，4.2是4岁的孩子...我有一个平面数组，里面有所有的数据和路径。如何创建嵌套数组的最佳方法，其中子数组根据其路径嵌套到其父数组。 输入： 输出： 最好的方法是递归的。对这个算法有什么建议吗？
-
我正在使用MongoDB-Hadoop连接器读取具有嵌入文档的集合。 例外 scala.matcherror:io.abc.spark.schema.personametadata@31FF5060（类为io.abc.spark.sql.catalyst.catalyst.catalysttypeConverters$structconverters.scala:255)在org.apache.s
-
问题内容： 我不太使用php，并且在对象创建方面有些模糊。我需要发出一个发送json的网络服务请求，我想我已经覆盖了那部分。在提交数据之前，我需要创建一个嵌套对象。根据我对基于ecma的脚本语言的经验，我认为这是微不足道的，但是我发现该语法难以导航。我要创建的对象如下。 我已经看到了许多平面对象的示例，但是还没有找到嵌套对象的最小示例。上面对象的php语法是什么？这是在PHP中做的不寻常的事情吗？