0

私は次のようなjsonオブジェクトを持っています

var data = [
        {
        "parent": "Home",
        "child": [

                ]
        },
        {"parent": "Services",
        "child": [
                {"title":"Infrastruture"},
                {"title":"Development"}

                ]
        },
        {
        "parent": "Sector",
        "child": [
                {"title":"Recruitment Consultant"},
                {"title":"Change Management"},
                {"title":"Industrial Relations"}
                ]
        },          
        ]

このjsonに関して水平メニューを作成したいと思います。私は新しいjsonオブジェクトですが、どうすればこれを行うことができますか？

4

2 に答える 2

1

これで完了します。

マークアップ

<ul id="nav"></ul>

JavaScript

var data = [
    {
    "parent": "Home",
    "child": [

            ]
    },
    {"parent": "Services",
    "child": [
            {"title":"Infrastruture"},
            {"title":"Development"}

            ]
    },
    {
    "parent": "Sector",
    "child": [
            {"title":"Recruitment Consultant"},
            {"title":"Change Management"},
            {"title":"Industrial Relations"}
            ]
    },          
    ];
$(function() {
    var nav = $("#nav");
    $.each(data,function(idx, obj){
        if(obj.child.length>0)
        {
            nav.append('<li><a href="#">'+obj.parent+'</a><ul id="'+obj.parent+'">'); //Create Parent menu and attach Child menu items list with ID same as parent menu name.
            var parent = $("#"+obj.parent); //Select this parent to insert child items.

            //Insert child menu items.
            $.each(obj.child, function(idx, childobj){
                parent.append('<li><a href="#">'+childobj.title+'</a></li>');
            });
            nav.append('</ul></li>'); //Close each tag.
        }
        else
        {
            nav.append('<li><a href="#">'+obj.parent+'</a></li>'); //No child menu items present, just create parent menu.
        }
    });
});

JSと組み合わせたマークアップが非常に多いため（これは意味的に間違っている可能性があります）（良い考えではありません）、構造が同じである限り、この方法で問題ありません。

デモフィドル

PS：スタイリングの部分はお任せします。ヒント：JS自体にマークアップとともにクラスを提供します。;-)

于 2013-02-21T12:57:29.727 に答える
0

のようにjsonにアクセスできますJavascript Object。あなたはこのようなことをすることができます：

for (var i = 0; i < data.length; i++) {

    createHeaderLink(data[i].parent);
    createChildLinks(data[i].child);

}
于 2013-02-21T11:59:20.283 に答える