我正在尝试构建一个具有嵌套子 ul 列表级别(实际上 4 个以上子级别)的动态无序列表，我很难渲染我需要的实际标记，因此在稍后阶段我可以使其更具功能性，我在以下链接创建jsfiddle ，html 标记如下所示:
<ul class="nav nav-sidebar">
<li class="dropdown">
<a href="#">theatre_name: Americas <i class="ion-chevron-down text-primary pull-right"></i></a>
<ul class="">
<li class="dropdown">
<a href="#">location_name: USA</a>
<ul class="">
<li>
<a href="#">Living in USA</a>
<ul class="">
<li><a href="#">123 John Doe</a></li>
<li><a href="#">534 John Doe</a></li>
<li><a href="#">9728 John Doe</a></li>
<li><a href="#">7668 John Doe</a></li>
</ul>
</li>
<li>
<a href="#">What to do in USA</a>
<ul>
<li><a href="#">Fishing</a></li>
<li><a href="#">Skiing</a></li>
<li><a href="#">Hicking</a></li>
<li><a href="#">Running</a></li>
</ul>
</li>
<li>
<a href="#">Visiting in USA</a>
<ul>
<li><a href="#">By Car</a></li>
<li><a href="#">By Air</a></li>
<li><a href="#">By Boat</a></li>
<li><a href="#">Walking</a></li>
</ul>
</li>
</ul>
</li> <!-- /.dropdown -->
<li class="dropdown">
<a href="#">location_name: Mexico</a>
<ul class="">
<li>
<a href="#">Living in Mexico</a>
<ul class="">
<li><a href="#">123 Juan Lopez</a></li>
<li><a href="#">534 Juan Lopez</a></li>
<li><a href="#">9728 Juan Lopez</a></li>
<li><a href="#">7668 Juan Lopez</a></li>
</ul>
</li>
<li>
<a href="#">What to do in Mexico</a>
<ul>
<li><a href="#">Fishing</a></li>
<li><a href="#">Skiing</a></li>
<li><a href="#">Hicking</a></li>
<li><a href="#">Running</a></li>
</ul>
</li>
<li>
<a href="#">Visiting in Mexico</a>
<ul>
<li><a href="#">Por Auto</a></li>
<li><a href="#">Por Avion</a></li>
<li><a href="#">Por Barco</a></li>
<li><a href="#">Caminando</a></li>
</ul>
</li>
</ul>
</li> <!-- /.dropdown -->
</ul>
</li> <!-- /.dropdown -->
</ul> <!-- ul -->
渲染后，标记应如下图所示:
这是json数据。
{
"user_id": "01010101",
"user_name": "John Doe",
"super_user": true,
"theatre": {
"theatre_name": "americas",
"locations": [
{
"location_name": "USA",
"events": [
{
"event_name": "living in Palo Alto",
"people": [
"123 John Doe",
"534 John Doe",
"9728 John Doe",
"7668 John Doe"
]
},
{
"event_name": "What to do in Palo Alto",
"people": [
"Fishing",
"Skying",
"Hiking",
"Running"
]
},
{
"event_name": "Visiting in Palo Alto",
"people": [
"By Car",
"By Air",
"By Boat",
"Walking"
]
}
]
}
],
"theatre_name": "Europa",
"locations": [
{
"location_name": "Spain",
"events": [
{
"event_name": "living in Barcelona",
"people": [
"123 Juan Garza",
"534 Juan Garza",
"9728 Juan Garza",
"7668 Juan Garza"
]
},
{
"event_name": "What to do in Barcelona",
"people": [
"Fishing",
"Skying",
"Hiking",
"Running"
]
},
{
"event_name": "Visiting in Barcelona",
"people": [
"By Car",
"By Air",
"By Boat",
"Walking"
]
}
]
}
],
"theatre_name": "Asia",
"locations": [
{
"location_name": "China",
"events": [
{
"event_name": "living in Beijing",
"people": [
"123 Wei Zhang",
"534 Wei Zhang",
"9728 Wei Zhang",
"7668 Wei Zhang"
]
},
{
"event_name": "What to do in Beijing",
"people": [
"Fishing",
"Skying",
"Hiking",
"Running"
]
},
{
"event_name": "Visiting in Beijing",
"people": [
"By Car",
"By Air",
"By Boat",
"Walking"
]
}
]
}
]
}
}
这是我找到的 JavaScript，但需要一些工作才能使其发挥作用，如何循环 json 对象、提取数据并生成所需的标记？
$(function(){
$.getJSON('./JSON/latest.json', function(data) {
var items = [];
$.each(data, function(i, item) {
items.push('<li><a href="' + link + '">' + pName + '</a><span class="vTitle">' + vTitle + '</span>' + shortDesc + '</li>');
});
$('#latestList').append( items.join('') );
});
});
最佳答案
这是你如何做到的，
$(document).ready(function(){
$("body").append(list_theatre(events.theatre));
})
function list_theatre(jsonObject){
var newUl = $("<ul/>");
var newLi = $("<li/>");
$.each(jsonObject,function(index,object){
var newLi = $("<li/>");
newLi.append('<a href="#">theatre_name: '+object.theatre_name+' <i class="ion-chevron-down text-primary pull-right"></i></a>');
newLi.append(list_locations(object.locations));
newUl.append(newLi);
})
return newUl;
}
function list_locations(jsonObject){
var newUl = $("<ul/>");
var newLi = $("<li/>");
$.each(jsonObject,function(index,object){
var newLi = $("<li/>");
newLi.append('<a href="#">location_name: '+object.location_name+'</a>');
newLi.append(list_events(object.events));
newUl.append(newLi);
})
return newUl;
}
function list_events(jsonObject){
var newUl = $("<ul/>");
var newLi = $("<li/>");
//console.log(jsonObject);
$.each(jsonObject,function(index,object){
var newLi = $("<li/>");
newLi.append('<a href="#">'+object.event_name+'</a>');
newLi.append(list_people(object.people));
newUl.append(newLi);
})
return newUl;
}
function list_people(jsonObject){
var newUl = $("<ul/>");
var newLi = $("<li/>");
$.each(jsonObject,function(index,text){
var newLi = $("<li/>");
newLi.append('<a href="#">'+text+'</a>');
newUl.append(newLi);
})
return newUl;
}
我必须稍微改变一下 json。由于 theatre 是一个集合，因此它需要是一个 json 对象的 array 。
在这里找到完整的js和json:http://jsfiddle.net/satyagupta/vabnyzvv/1/
您还可以通过添加一些递归来稍微缩小代码。
关于javascript - 使用 jQuery 从 json 动态呈现无序列表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28870448/