我正在尝试从 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>
最佳答案
这是一个更好的解决方案:
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"));
关于javascript - 从数据对象创建嵌套的 UL 列表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6034960/
总的来说，我对ruby还比较陌生，我正在为我正在创建的对象编写一些rspec测试用例。许多测试用例都非常基础，我只是想确保正确填充和返回值。我想知道是否有办法使用循环结构来执行此操作。不必为我要测试的每个方法都设置一个assertEquals。例如:describeitem,"TestingtheItem"doit"willhaveanullvaluetostart"doitem=Item.new#HereIcoulddotheitem.name.shouldbe_nil#thenIcoulddoitem.category.shouldbe_nilendend但我想要一些方法来使用
出于纯粹的兴趣，我很好奇如何按顺序创建PI，而不是在过程结果之后生成数字，而是让数字在过程本身生成时显示。如果是这种情况，那么数字可以自行产生，我可以对以前看到的数字实现垃圾收集，从而创建一个无限系列。结果只是在Pi系列之后每秒生成一个数字。这是我通过互联网筛选的结果:这是流行的计算机友好算法，类机器算法:defarccot(x,unity)xpow=unity/xn=1sign=1sum=0loopdoterm=xpow/nbreakifterm==0sum+=sign*(xpow/n)xpow/=x*xn+=2sign=-signendsumenddefcalc_pi(digits
关闭。这个问题是opinion-based.它目前不接受答案。想要改进这个问题？更新问题，以便editingthispost可以用事实和引用来回答它.关闭4年前。Improvethisquestion我想在固定时间创建一系列低音和高音调的哔哔声。例如:在150毫秒时发出高音调的蜂鸣声在151毫秒时发出低音调的蜂鸣声200毫秒时发出低音调的蜂鸣声250毫秒的高音调蜂鸣声有没有办法在Ruby或Python中做到这一点？我真的不在乎输出编码是什么(.wav、.mp3、.ogg等等)，但我确实想创建一个输出文件。
在控制台中反复尝试之后，我想到了这种方法，可以按发生日期对类似activerecord的(Mongoid)对象进行分组。我不确定这是完成此任务的最佳方法，但它确实有效。有没有人有更好的建议，或者这是一个很好的方法？#eventsisanarrayofactiverecord-likeobjectsthatincludeatimeattributeevents.map{|event|#converteventsarrayintoanarrayofhasheswiththedayofthemonthandtheevent{:number=>event.time.day,:event=>ev
我得到了一个包含嵌套链接的表单。编辑时链接字段为空的问题。这是我的表格:Editingkategori{:action=>'update',:id=>@konkurrancer.id})do|f|%>'Trackingurl',:style=>'width:500;'%>'Editkonkurrence'%>|我的konkurrencer模型:has_one:link我的链接模型:classLink我的konkurrancer编辑操作:defedit@konkurrancer=Konkurrancer.find(params[:id])@konkurrancer.link_attrib
我主要使用Ruby来执行此操作，但到目前为止我的攻击计划如下:使用gemsrdf、rdf-rdfa和rdf-microdata或mida来解析给定任何URI的数据。我认为最好映射到像schema.org这样的统一模式，例如使用这个yaml文件，它试图描述数据词汇表和opengraph到schema.org之间的转换:#SchemaXtoschema.orgconversion#data-vocabularyDV:name:namestreet-address:streetAddressregion:addressRegionlocality:addressLocalityphoto:i
使用带有Rails插件的vim，您可以创建一个迁移文件，然后一次性打开该文件吗？textmate也可以这样吗？ 最佳答案 你可以使用rails.vim然后做类似的事情::Rgeneratemigratonadd_foo_to_bar插件将打开迁移生成的文件，这正是您想要的。我不能代表textmate。 关于ruby-使用VimRails，您可以创建一个新的迁移文件并一次性打开它吗？，我们在StackOverflow上找到一个类似的问题： https://sta
这道题是thisquestion的逆题.给定一个散列，每个键都有一个数组，例如{[:a,:b,:c]=>1,[:a,:b,:d]=>2,[:a,:e]=>3,[:f]=>4,}将其转换为嵌套哈希的最佳方法是什么{:a=>{:b=>{:c=>1,:d=>2},:e=>3,},:f=>4,} 最佳答案 这是一个迭代的解决方案，递归的解决方案留给读者作为练习:defconvert(h={})ret={}h.eachdo|k,v|node=retk[0..-2].each{|x|node[x]||={};node=node[x]}node[
我对最新版本的Rails有疑问。我创建了一个新应用程序(railsnewMyProject)，但我没有脚本/生成，只有脚本/rails，当我输入ruby./script/railsgeneratepluginmy_plugin"Couldnotfindgeneratorplugin.".你知道如何生成插件模板吗？没有这个命令可以创建插件吗？PS:我正在使用Rails3.2.1和ruby1.8.7[universal-darwin11.0] 最佳答案 随着Rails3.2.0的发布，插件生成器已经被移除。查看变更日志here.现在
我有一个表单，其中有很多字段取自数组(而不是模型或对象)。我如何验证这些字段的存在？solve_problem_pathdo|f|%>... 最佳答案 创建一个简单的类来包装请求参数并使用ActiveModel::Validations。#definedsomewhere,atthesimplest:require'ostruct'classSolvetrue#youcouldevencheckthesolutionwithavalidatorvalidatedoerrors.add(:base,"WRONG!!!")unlesss