0

我一直在尝试研究如何将一大块 JSON 数据加载到一系列下拉列表中,这些数据的顺序如下:主类别 -> 子类别 -> 链接(a href="url")等:

布局示例的图像

到目前为止,我有这个:

$(function() {
            var data = [
                {
                    name: "Work By Allan Morse",
                    data: [
                        {
                            name: "Residential Work",
                            data: [
                                    { name: "Studio", url: "http://www.flickr.com/photos/91118467@N07/sets/72157632257518934/" },
                                    { name: "Yates House", url: "http://www.flickr.com/photos/91118467@N07/sets/72157632257525780/" },
                                ]
                        },
                        {
                            name: "Sacred Architecture",
                            data: [
                                    { name: "Meditation Room", url: "http://www.flickr.com/photos/91118467@N07/sets/72157632257533152/" },
                                ]
                        }
                    ]
                },
                {
                    name: "Residential under Melling Morse Architects",
                    data: [
                        {
                            name: "Affordable Housing",
                            data: [
                                    { name: "Shelter Housing", url: "http://www.flickr.com/photos/91118467@N07/sets/72157632257505196/" },
                                    { name: "Matariki", url: "http://www.flickr.com/photos/91118467@N07/sets/72157632257493734/" },
                                ]
                        },
                        {
                            name: "Bespoke Houses",
                            data: [
                                    { name: "Samurai House", url: "http://www.flickr.com/photos/91118467@N07/sets/72157632257486504/" },
                                    { name: "Split Box", url: "http://www.flickr.com/photos/91118467@N07/sets/72157632257471554/" },
                                ]
                        }
                    ]
                },
                {
                    name: "Small Commerical under Melling Morse Architects",
                    data: [
                        { name: "Shop and Studio", url: "http://www.flickr.com/photos/91118467@N07/sets/72157632253307953/" },
                        { name: "Church Hall", url: "http://www.flickr.com/photos/91118467@N07/sets/72157632253379065/" },
                        { name: "Bed and Breakfast", url: "http://www.flickr.com/photos/91118467@N07/sets/72157632253732335/" }
                    ]
                }
            ]

        /* Start of the thing that builds the navigation, not sure how to do the next levels */
        $.each(data, function(i, option) {
            category = option.name;
            $('#project_nav').append($('<li class="project_subnav_container"><div class="category">'+ category +'</div><ul class="project_subnav"><div class="sub_category">Residential Work</div><li><a href="">Example Project</a></li><li><a href="">Example Project 2</a></li><div class="sub_category">Sacred Architecture</div><li><a href="">Example Project</a></li></ul></li> '));
        }); 

        })

我很难理解如何访问第一组名称之外的任何内容。到目前为止,我的前 3 个类别做得很好——艾伦·莫尔斯的作品,梅林下的住宅,梅林下的商业等。

4

1 回答 1

1

正如我理解的那样,您需要在其中的每个循环中再增加 2 个。像这样的东西:

    $.each(data, function(i, option) {
        category = option.name;
        var $navigation = $('<li class="project_subnav_container"><div class="category">'+ category +'</div></li> ').appendTo($('#project_nav'));
        $.each(option.data, function(i, suboption) {
            var subcategory = suboption.name;
            var $subCategory = $("<ul class='project_subnav'><div class='sub_category'>" + subcategory + "</div></ul>").appendTo($navigation);
            $.each(suboption.data, function (i, item) {
                  var itemName = item.name;
                  $("<li><a href='" + item.url + "'>" + itemName + "</a></li>").appendTo($subCategory);
            });
        });
    });
于 2012-12-17T13:06:40.980 回答