jQuery中each循环json正确的该怎么写?

失落的额头
  • 132

需求:根据后台传来的json数据循环出一个多级导航菜单
问题:
1、循环时二级三级子菜单li标签外层包裹ul标签怎么写?
2、我这样写是否正确?有没有更好的写法?应该怎样写?

ps:本人小白,还望大神耐心指点。多谢

json数据大概如下:

    [
      { "id":"1" , "name":"类型一","type":"a",
        "cc":[
          { "id":"1-1" , "name":"二级1.1","type":"bb" },
          { "id":"1-2" , "name":"二级1.2","type":"cc",
            "cc":[
              { "id":"1-1-1" , "name":"三级1.1.1","type":"aaa" },
              { "id":"1-1-2" , "name":"三级1.1.2","type":"bbb" },
              { "id":"1-1-3" , "name":"三级1.1.3","type":"ccc" },
              { "id":"1-1-4" , "name":"三级1.1.4","type":"ddd" }
            ]},
          { "id":"1-3" , "name":"二级1.3","type":"dd" },
          { "id":"1-4" , "name":"二级1.4","type":"ee" }
        ]
      },
      { "id":"2" , "name":"类型二","type":"b",
        "cc":[
          { "id":"2-1" , "name":"二级2.1","type":"ff" },
          { "id":"2-2" , "name":"二级2.2","type":"gg",
            "cc":[
              { "id":"2-2-1" , "name":"三级2.2.1","type":"fff" },
              { "id":"2-2-2" , "name":"三级2.2.2","type":"ggg" },
              { "id":"2-2-3" , "name":"三级2.2.3","type":"hhh" },
              { "id":"2-2-4" , "name":"三级2.2.4","type":"iii" }
            ]},
          { "id":"1-3" , "name":"二级2.3","type":"hh" },
          { "id":"1-4" , "name":"二级2.4","type":"ii" }
        ]},
      { "id":"3" , "name":"类型三","type":"c" },
      { "id":"4" , "name":"类型四","type":"d" }
   ]

jquery代码如下:

 $(function () {

    $.ajax({
        type: "post",
        url: "./json/test.json",
        success: function (data) {
            $.each(data, function(index, content){
                var showList = $("<li class='nav" + content.id + "'> "+ content.name +" </li>");
                $.each(data[index].cc,function (i,k) {
                    var showC = $("<li class='list" + k.id + "'> "+ k.name +" </li>");
                    $.each(data[index].cc[i].cc,function (m,n) {
                        var showCC = $("<li class='list" + n.id + "'> "+ n.name +" </li>");
                        showC.append(showCC)
                    });
                    showList.append(showC)
                });
                $(".nav-list").append(showList);
            });
        }
    });

});
    

HTML 代码如下:

<ul class="nav-list"></ul>

回复
阅读 4.4k
6 个回答
✓ 已被采纳
<script type="text/javascript">
    $.ajax({
        type: "get",
        url: "/media/json/test.json",
        success: function (data) {
            var list = "";
            $.each(data, function (index, item) {
                list += "<li>" + item.name;
                var data2 = item.cc;
                if (data2) {
                    $.each(data2, function (index2, item2) {
                        if (index2 === 0) {
                            list += "<ul>";
                        }
                        list += "<li>" + item2.name;
                        var data3 = item2.cc;
                        if(data3) {
                            $.each(data3, function (index3, item3) {
                                if (index3 === 0) {
                                    list += "<ul>";
                                }
                                list += "<li>" + item3.name + "</li>";
                                if (index3 + 1 === data3.length) {
                                    list += "</ul>";
                                }
                            });
                        }
                        list += "</li>";
                        if (index2 + 1 === data2.length) {
                            list += "</ul>";
                        }
                    });
                }
                list += "</li>";
                console.log(list);
            });
            console.log(list);
            $("#nav-list").append(list);
        }
    });
</script>

用递归就可以了,不管有多少层级都适用

 $(function () {
    $.ajax({
        type: "post",
        url: "./json/test.json",
        success: function (data) {
            var menu = $('<ul class="nav-list">');
            (function createMenu(menu, data){
              for(var index in data){
                var li = $('<li class="list'+data[index].id+'">'+data[index].name+'</li>');
                menu.append(li);
                if(data[index].cc){
                  createMenu(li ,data[index].cc)
                }
              }
            })(menu, data);
        }
    });
});

循环没问题,前面的朋友说的也是循环中append的影响性能,直接先拼成一个html字符串或使用documentfragment,最后一次append

你这样写性能太差了,可以拼接成一个字符串,在循环最后执行

 $(".nav-list").append("xxxxxxx");

直接拼成一个字符串append进去

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏