Javascript jquery基于JSON数据填充ul和li

下面的代码创建5 ul并将li填充到所有的.下拉菜单中。 如何使用JSON数据（或者可能有更好的方法）让jquery填充正确的ul

预期产出： 并非所有的幻灯片都包含在所有模块中。。只有某些幻灯片才能进入特定模块，如JSON数据所示

var menulist = {"List" : [
{"menutitle" : "Module 1", "mod" : "1"},
{"menutitle" : "Module 2", "mod" : "2"},
{"menutitle" : "Module 3", "mod" : "3"},
{"menutitle" : "Module 4", "mod" : "4"},
{"menutitle" : "Module 5", "mod" : "5"}
]}

var slidelist = {"List" : [
{"slidetitle" : "Slide 1", "mod" : "1"},
{"slidetitle" : "Slide 2", "mod" : "1"},
{"slidetitle" : "Slide 3", "mod" : "1"},
{"slidetitle" : "Slide 4", "mod" : "1"},
{"slidetitle" : "Slide 5", "mod" : "2"},
{"slidetitle" : "Slide 6", "mod" : "2"},
{"slidetitle" : "Slide 7", "mod" : "3"},
{"slidetitle" : "Slide 8", "mod" : "3"},
{"slidetitle" : "Slide 9", "mod" : "3"},
{"slidetitle" : "Slide 10", "mod" : "4"},
{"slidetitle" : "Slide 11", "mod" : "4"},
{"slidetitle" : "Slide 12", "mod" : "5"},
{"slidetitle" : "Slide 13", "mod" : "5"},
{"slidetitle" : "Slide 14", "mod" : "5"},
{"slidetitle" : "Slide 15", "mod" : "5"}
]}


$(document).ready(function(){
    var listmenus = "";
    for (var t = 0; t < menulist.List.length; t++){
        listmenus += "<a href='#' class='dropdown-toggle' data-toggle='dropdown'>" + menulist.List[t].menutitle + "<span class='caret'></span></a><ul class='dropdown-menu'></ul>"
    }
    $(".test").html(listmenus);
});
$(document).ready(function(){
    var listslides = "";
    for (var s = 0; s < slidelist.List.length; s++){
        listslides += "<li><a href='#' class='link'>" + slidelist.List[s].slidetitle + "</a></li>"
    }
   $(".dropdown-menu").html(listslides);
});

var menulist={“列表”：[
{“menutitle”：“模块1”，“模块”：“1”}，
{“menutitle”：“模块2”，“模块”：“2”}，
{“menutitle”：“模块3”，“模块”：“3”}，
{“menutitle”：“模块4”，“模块”：“4”}，
{“menutitle”：“模块5”，“模块”：“5”}
]}
var slidelist={“列表”：[
{“slidetitle”：“Slide 1”，“mod”：“1”}，
{“slidetitle”：“Slide 2”，“mod”：“1”}，
{“slidetitle”：“Slide 3”，“mod”：“1”}，
{“slidetitle”：“Slide 4”，“mod”：“1”}，
{“slidetitle”：“Slide 5”，“mod”：“2”}，
{“slidetitle”：“Slide 6”，“mod”：“2”}，
{“slidetitle”：“Slide 7”，“mod”：“3”}，
{“slidetitle”：“Slide 8”，“mod”：“3”}，
{“slidetitle”：“Slide 9”，“mod”：“3”}，
{“slidetitle”：“Slide 10”，“mod”：“4”}，
{“slidetitle”：“Slide 11”，“mod”：“4”}，
{“slidetitle”：“Slide 12”，“mod”：“5”}，
{“slidetitle”：“Slide 13”，“mod”：“5”}，
{“slidetitle”：“Slide 14”，“mod”：“5”}，
{“slidetitle”：“Slide 15”，“mod”：“5”}
]}
$（文档）.ready（函数（）{
var=”；
for（var t=0；t”
}
$（“.test”）.html（列表菜单）；
});
$（文档）.ready（函数（）{
var=”；
对于（var s=0；s”
}
$（“.dropdown menu”）.html（列表幻灯片）；
});

使用

数据-*

属性，该属性保存每个

ul

上的mod值，然后根据该值获取ul。您可以使用对象来保存生成的HTML字符串

var menulist={
“名单”：[{
“menutitle”：“模块1”，
“mod”：“1”
}, {
“menutitle”：“模块2”，
“mod”：“2”
}, {
“menutitle”：“模块3”，
“mod”：“3”
}, {
“menutitle”：“模块4”，
“mod”：“4”
}, {
“menutitle”：“模块5”，
“mod”：“5”
}]
}
var slidelist={
“名单”：[{
“幻灯片”：“幻灯片1”，
“mod”：“1”
}, {
“幻灯片”：“幻灯片2”，
“mod”：“1”
}, {
“幻灯片”：“幻灯片3”，
“mod”：“1”
}, {
“幻灯片”：“幻灯片4”，
“mod”：“1”
}, {
“幻灯片”：“幻灯片5”，
“mod”：“2”
}, {
“幻灯片”：“幻灯片6”，
“mod”：“2”
}, {
“幻灯片”：“幻灯片7”，
“mod”：“3”
}, {
“幻灯片”：“幻灯片8”，
“mod”：“3”
}, {
“幻灯片”：“幻灯片9”，
“mod”：“3”
}, {
“幻灯片”：“幻灯片10”，
“mod”：“4”
}, {
“幻灯片”：“幻灯片11”，
“mod”：“4”
}, {
“幻灯片”：“幻灯片12”，
“mod”：“5”
}, {
“幻灯片”：“幻灯片13”，
“mod”：“5”
}, {
“幻灯片”：“幻灯片14”，
“mod”：“5”
}, {
“幻灯片”：“幻灯片15”，
“mod”：“5”
}]
}
$（文档）.ready（函数（）{
var=”；
for（var t=0；t”
}
$（“.test”）.html（列表菜单）；
var listslides={}；
对于（var s=0；s
”
}
Object.keys（listslides）.forEach（函数（l）{
$（'.dropdown menu[data mod=“'+l+'']”]）.html（$（'
{
id:l，
html:listslides[l]
}))
})
});
使用
数据-*
属性，该属性保存每个
ul
上的mod值，然后根据该值获取ul。您可以使用对象来保存生成的HTML字符串


var menulist={
“名单”：[{
“menutitle”：“模块1”，
“mod”：“1”
}, {
“menutitle”：“模块2”，
“mod”：“2”
}, {
“menutitle”：“模块3”，
“mod”：“3”
}, {
“menutitle”：“模块4”，
“mod”：“4”
}, {
“menutitle”：“模块5”，
“mod”：“5”
}]
}
var slidelist={
“名单”：[{
“幻灯片”：“幻灯片1”，
“mod”：“1”
}, {
“幻灯片”：“幻灯片2”，
“mod”：“1”
}, {
“幻灯片”：“幻灯片3”，
“mod”：“1”
}, {
“幻灯片”：“幻灯片4”，
“mod”：“1”
}, {
“幻灯片”：“幻灯片5”，
“mod”：“2”
}, {
“幻灯片”：“幻灯片6”，
“mod”：“2”
}, {
“幻灯片”：“幻灯片7”，
“mod”：“3”
}, {
“幻灯片”：“幻灯片8”，
“mod”：“3”
}, {
“幻灯片”：“幻灯片9”，
“mod”：“3”
}, {
“幻灯片”：“幻灯片10”，
“mod”：“4”
}, {
“幻灯片”：“幻灯片11”，
“mod”：“4”
}, {
“幻灯片”：“幻灯片12”，
“mod”：“5”
}, {
“幻灯片”：“幻灯片13”，
“mod”：“5”
}, {
“幻灯片”：“幻灯片14”，
“mod”：“5”
}, {
“幻灯片”：“幻灯片15”，
“mod”：“5”
}]
}
$（文档）.ready（函数（）{
var=”；
for（var t=0；t
”
}
$（“.test”）.html（列表菜单）；
var listslides={}；
对于（var s=0；s
”
}
Object.keys（listslides）.forEach（函数（l）{
$（'.dropdown menu[data mod=“'+l+'']”]）.html（$（'
{
id:l，
html:listslides[l]
}))
})
});
添加模块
mod
作为DOM对象的属性，可以让您稍后选择它来区分哪些幻灯片放在哪里


var menulist={“List”：[{“menutitle”：“模块1”，“mod”：“1”}，{“menutitle”：“模块2”，“mod”：“2”}，{“menutitle”：“模块3”，“mod”：“3”}，{“menutitle”：“模块4”，“mod”：“4”}，{“menutitle”：“模块5”，“mod”：“5”}
var slidelist={“List”：[{“slidetitle”：“Slide 1”，“mod”：“1”}，{“slidetitle”：“Slide 2”，“mod”：“1”}，{“slided
var dp = $('<div/>', {class: 'dropdown'})
      .append($('<button/>', {
          class: 'btn btn-default dropdown-toggle',
          type: 'button',
          id: 'dropdownMenu' + index,
          'data-toggle': 'dropdown',
          'aria-haspopup': true,
          'aria-expanded': true
      }).append(ele.menutitle).append($('<span/>', {class: 'caret'})))
      .append($('<ul/>', {
          class: 'dropdown-menu',
          'aria-labelledby': 'dropdownMenu' + index
      }));

$(function() {
    $.each(listMenu.List, function(ind, arr) {
        var a = $('<a />', { 'data-toggle': 'dropdown', href: 'javascript:void(0)' }).addClass('dropdown-toggle').text(arr.menutitle),
            span = $('<span />').addClass('caret').appendTo(a),
            ul = $('<ul />');
        $.each(listSlide.List, function(slideInd, slideArr) {
            if (slideArr.mod == arr.mod) {
                var li = $('<li />').appendTo(ul);
                $('<a />', { href: 'javascript:void(0)' }).addClass('link').text(slideArr.slidetitle).appendTo(li);
            }
        });
        $('.test').append(a, ul);
    });
});