Question

是否有办法通过从网页获取这些列表项的数据来自动在HTML中添加新列表项。列表是这样的：

<ol class="treeBody">
        <li>
            <label for="folder1"><span id="albumname">0</span></label> <input type="checkbox" id="albumname" />
            <ol>
                <li>
                    <label for="subfolder1"><span id="subdirname">0</span></label> <input type="checkbox" id="subdirname" />
                    <ol>
                        <li class="file"><a href="">File 1</a></li>
                    </ol>
                </li>
            </ol>
        </li>
    </ol>

我使用websocket获取数据：

$.get("http://localhost:8040/api/album", function (data) {
        console.log("data: ", data);
        var i;
        var j;
        console.log(i);
        for (i = 0; i < data.length; i++) {
            console.log("start for loop");
            var albname = data[i].Name;
            console.log("albname: ", albname);
            $("#albumname").text(albname);
            var subalbum = data[i].SubAlbums
            for (j = 0; j < subalbum.length; j++) {
                var subname = data[i].SubAlbums[j];
                console.log("SubName: ", subname);
                $("#subdirname").text(subname);
            }
        }
    });

Answer 1

试试这个递归函数

function renderMenu(data){

    var menu = '<ul>';

    if(data.items.length){

        for(var i = 0; i < data.items.length; i++){
            var li = '<li>';

            if(data.items[i].link)
                li += '<a href="' + data.items[i].link + '">';

            if(data.items[i].title)
                li += data.items[i].title;

            if(data.items[i].link)
                li += '</a>';

            if(data.items[i].items) {
                var sub_menu = renderMenu(data.items[i]);
                li += sub_menu;
            }

            li += '</li>';

            menu += li;
        }
    }

    menu += '</ul>';

    return menu;
}

//structure JSON
var data = {
    'items': [
        {
            'link' : 'http://test.com',
            'title' : 'Root',
            'items' : [
                {
                    'link' : 'http://test.test.com',
                    'title' : 'sub-item',
                    'items' : [
                        {
                            'link' : 'http://test.test.test.com',
                            'title' : 'sub-sub-item'
                        }
                    ]
                }
            ]
        },
        {
            'link' : 'http://test.com/t1',
            'title' : 'Item-2'
        },
        {
            'link' : 'http://test.com/t1',
            'title' : 'Item-3'
        }
    ]
};

renderMenu(data);

动态添加新列表项到网页

1 个答案: