我已决定使用slicknav为火灾警报事件系统的一系列记录构建动态导航系统。我在Lotus Domino数据库中建立了这个系统，并且在这个数据库中我有一个按年，月和日可扩展部分的动态系统。这是假设在我的应用程序中复制该导航。在查看了不同的插件之后，我决定使用slicknav。这就是我面临的挑战。我必须根据文档记录来构建此系统。这是我系统的基础。 首先，这是我返回的json数据的示例：
{"firedrills":
[
{"alarmyear":2018,
"alarmyearmonth":"2018-9",
"alarmyearmonthday":"2018-9-18",
"monthname":"September",
"alarmday":"18",
"alarmdatetime":"2018-09-18 00:15:00.000",
"inciNumber":"2018-599",
"incidentlocation":"FR2W"},
{"alarmyear":2018,
"alarmyearmonth":"2018-8",
"alarmyearmonthday":"2018-8-7",
"monthname":"August",
"alarmday":"7",
"alarmdatetime":"2018-08-07 19:08:00.000",
"inciNumber":"2018-537",
"incidentlocation":"Laundry"},
{"alarmyear":2018,
"alarmyearmonth":"2018-7",
"alarmyearmonthday":"2018-7-3",
"monthname":"July",
"alarmday":"3",
"alarmdatetime":"2018-07-03 08:15:00.000",
"inciNumber":"2018-464",
"incidentlocation":"FA5E"}
]}
这是我用来静态测试的html和jquery代码：
<div id="firedrillmainnavdiv">
<ul id="firedrillmainul"></ul>
</div>
<script type="text/javascript">
$(function(){
$.ajax({
url:'../json/getfiredrills.php',
dataType: 'json'
}).done(function(data){
var $firedrillmainul=$("#firedrillmainul");
$firedrillmainul.empty();
$firedrillmainul.append(
$('<li>').prop({id:"2018"}).text("2018").append(
$('<ul>').prop({id:"2018-ul"}).append(
$('<li>').prop({id:"2018-9"}).text("September").append(
$('<ul>').prop({id:"2018-9-ul"}).append(
$('<li>').prop({id:"2018-9-18"}).text("18").append(
$('<ul>').prop({id:"2018-9-18-ul"}).append(
$('<li>').prop({id:"2018-599"}).append($('<a>').prop({href:"#"}).text("FR2W"))
)
)
)
)
).append(
$('<li>').prop({id:"2018-8"}).text("August").append(
$('<ul>').prop({id:"2018-8-ul"}).append(
$('<li>').prop({id:"2018-8-7"}).text("7").append(
$('<ul>').prop({id:"2018-8-7-ul"}).append(
$('<li>').prop({id:"2018-537"}).append($('<a>').prop({href:"#"}).text("Laundry"))
)
)
)
)
).append(
$('<li>').prop({id:"2018-7"}).text("July").append(
$('<ul>').prop({id:"2018-7-ul"}).append(
$('<li>').prop({id:"2018-7-3"}).text("3").append(
$('<ul>').prop({id:"2018-7-3-ul"}).append(
$('<li>').prop({id:"2018-464"}).append($('<a>').prop({href:"#"}).text("FA5E"))
)
)
)
)
)
)
)
$firedrillmainul.slicknav({
label: 'Fire Drills',
prependTo:'#firedrillmainnavdiv',
duplicate: false
});
})
})
</script>
这一切都没有问题。这是我为动态构建此代码而构建的代码。我正在使用ID在菜单的正确级别附加数据。通过代码进行的第一次迭代工作正常，但随后在后续迭代中找不到将代码附加到的ID。这是代码。 我仅显示构建无序列表的逻辑。
$(function(){
$.ajax({
url:'../json/getfiredrills.php',
dataType: 'json'
}).done(function(data){
var $firedrillmainul=$("#firedrillmainul"),
alarmyear="";
$firedrillmainul.empty();
$.each(data.firedrills,function(key,value){
if (alarmyear==""){
$firedrillmainul.append(
$('<li>').prop({id:value.alarmyear}).text(value.alarmyear).append(
$('<ul>').prop({id:value.alarmyear+'-ul'}).append(
$('<li>').prop({id:value.alarmyearmonth}).text(value.monthname).append(
$('<ul>').prop({id:value.alarmyearmonth+'-ul'}).append(
$('<li>').prop({id:value.alarmyearmonthday}).text(value.alarmday).append(
$('<ul>').prop({id:value.alarmyearmonthday+'-ul'}).append(
$('<li>').append($('<a>').prop({href:""}).text(value.incidentlocation))
)
)
)
)
)
)
)
}else if($firedrillmainul.find("#"+value.alarmyearmonthday)){
$("#"+value.alarmyearmonthday+"-ul").append(
$('<li>').append($('<a>').prop({href:""}).text(value.incidentlocation))
)
}else if($firedrillmainul.find("#"+value.alarmyearmonth)){
$('<ul>').prop({id:value.alarmyearmonth+"-ul"}).append(
$('<li>').prop({id:value.alarmyearmonthday}).text(value.alarmday).append(
$('<ul>').prop({id:value.alarmyearmonthday+"-ul"}).append(
$('<li>').append($('<a>').prop({href:""}).text(value.incidentlocation))
)
)
)
}else if($firedrillmainul.find("#"+value.alarmyear)){
$("#"+value.alarmyear+"-ul").append(
$('<li>').prop({id:value.alarmyearmonth}).text(value.monthname).append(
$('<ul>').prop({id:value.alarmyearmonth+"-ul"}).append(
$('<li>').prop({id:value.alarmyearmonthday}).text(value.alarmday).append(
$('<ul>').prop({id:value.alarmyearmonthday+"-ul"}).append(
$('<li>').append($('<a>').prop({href:""}).text(value.incidentlocation))
)
)
)
)
)
}
alarmyear=value.alarmyear;
})
})
})
答案 0 :(得分：0)
我知道了。当我浏览记录时，我首先比较年份，然后比较月份，然后比较一天，然后从那里开始。这是循环遍历数据的代码。
$(function(){
$.ajax({
url:'../json/getfiredrills.php',
dataType: 'json'
}).done(function(data){
var $firedrillmainul=$("#firedrillmainul"),
alarmyear="",
alarmyearmonth="",
alarmyearmonthday="";
$firedrillmainul.empty();
if(data.hasOwnProperty("firedrills")){
$.each(data.firedrills,function(key,value){
if(alarmyear!=value.alarmyear){
$firedrillmainul.append(
$('<li>').prop({id:value.alarmyear}).text(value.alarmyear).append(
$('<ul>').prop({id:value.alarmyear+"-ul"}).append(
$('<li>').prop({id:value.alarmyearmonth}).text(value.monthname).append(
$('<ul>').prop({id:value.alarmyearmonth+"-ul"}).append(
$('<li>').prop({id:value.alarmyearmonthday}).text(value.alarmday).append(
$('<ul>').prop({id:value.alarmyearmonthday+"-ul"}).append(
$('<li>').prop({id:value.inciNumber}).append($('<a>').prop({href:"#"}).text(value.incidentlocation))
)
)
)
)
)
)
)
}else if(alarmyearmonth!=value.alarmyearmonth){
$("#"+alarmyear+"-ul").append(
$('<li>').prop({id:value.alarmyearmonth}).text(value.monthname).append(
$('<ul>').prop({id:value.alarmyearmonth+"-ul"}).append(
$('<li>').prop({id:value.alarmyearmonthday}).text(value.alarmday).append(
$('<ul>').prop({id:value.alarmyearmonthday+"-ul"}).append(
$('<li>').prop({id:value.inciNumber}).append($('<a>').prop({href:"#"}).text(value.incidentlocation))
)
)
)
)
)
}else if(alarmyearmonthday!==value.alarmyearmonthday){
$("#"+value.alarmyearmonth+"-ul").append(
$('<li>').prop({id:value.alarmyearmonthday}).text(value.alarmday).append(
$('<ul>').prop({id:value.alarmyearmonthday+"-ul"}).append(
$('<li>').prop({id:value.inciNumber}).append($('<a>').prop({href:"#"}).text(value.incidentlocation))
)
)
)
}else if(alarmyearmonthday==value.alarmyearmonthday){
$("#"+value.alarmyearmonthday+"-ul").append(
$('<li>').prop({id:value.inciNumber}).append($('<a>').prop({href:"#"}).text(value.incidentlocation))
)
}
alarmyear=value.alarmyear;
alarmyearmonth=value.alarmyearmonth;
alarmyearmonthday=value.alarmyearmonthday;
})
}
$firedrillmainul.slicknav({
label: 'Fire Drills',
prependTo:'#firedrillmainnavdiv',
duplicate: false
});
})
})
如您所见，我是否会逐步提高无序列表级别并根据答案添加数据。