Question

我正在尝试创建一个多级菜单，显示网站和子视图，如树视图。

我有一个xml样本数据，看起来像这样

<sites>
    <site name="1">
        <site name="1.1">
            <site name="1.1.1"></site>
        </site>
    </site>
    <site name="2"></site>
    <site name="3">
        <site name="3.1"></site>
    </site>
</sites>

到目前为止，我所写的内容如下：

$.get('Samplexml.xml', function (d) {
    $('#div1').append('<ul></ul>');
        var data = jumpdown(d);
    });
});

function jumpdown(obj) {
    debugger;
    $($.parseXML(obj.xml)).find('site').each(function () {
        var html = "<li>" + $(this).attr("name") + "</li>";
        for (var i = 0; i < $(this).children().length; i++) {
            var y = $($.parseXML($(this).children()[0].xml)).find('site').attr('name');
            // nextlevel = nextlevel + "<ul id='" + y + "'><li>" + y + "</li></ul>";
            html = html + jumpdown($(this));
        }
        nextlevel = nextlevel + "</ul>";
        return nextlevel;
        //var x = $(this).attr('name');
    });
}

不知怎的，我迷路了，无法继续。有人帮忙完成。

Answer 1

on jsFiddle：http://jsfiddle.net/ymzrocks/LhupLfoy/

$.get('Samplexml.xml', function (d) 
{
    var parent = $('#div1').append('<ul></ul>'); //mark the root element
    var data = $.parseXML(d.xml); // parse data from response ONCE

    jumpdown(parent, $(data).children('sites'));   // start the process
});



function jumpdown(parent, data) 
{
    data.children().each(function () // seek for site nodes
    {
        var list = $('<li></li>').appendTo(parent);
        var p = list.text($(this).attr("name")); 

        if ($(this).children().length > 0)  // if site contains nodes
        {
            p = $('<ul></ul>').appendTo(parent);

            jumpdown(p, $(this)); // do the same only as this node as a parent
        }
    });
}

创建动态ul li结构菜单

1 个答案: