JavaScript的递归形式列出了从XML到HTML(JavaScript Recursion t

我在那里呼吁我用递归来输出XML数据转换成HTML列表标记的练习。 可耻的是承认在数学我的缺点，我想有人告诉我如何实现递归的逻辑来使用JavaScript XML的“节点结构”。

下面是结果： 的jsfiddle

编辑新增样本XML四舍五入这个话题，并删除不需要的代码。 用于创建递归函数的XML：

<ddm>
           <menu0 submenu="true"><name>Welcome</name>
                     <menu1>Home Page</menu1>
                     <menu1>Bulletin</menu1>
                </menu0>
                <menu0 submenu="true"><name>Members\' Area</name>
                    <menu1>Constitution &amp; Bylaws</menu1>
                    <menu1 submenu="true"><name>AGM Minutes</name>
                        <menu2>2012</menu2>
                        <menu2>2011</menu2>
                    </menu1>
                </menu0>
                <menu0>About</menu0>
            </ddm>

<ddm>

Answer 1:

你与自己的顶级元素调用您的递归函数一次。 每个子元素只是调用相同的功能。 当你深究，你停下来，一切都被传递回来了。

这应该让你开始（一个你的XML的样本）。

演示：

输出：

脚本：

document.getElementById( 'parse' ).addEventListener( 'click', function () {
    var xml = '<ddm>'
                + '<menu0 submenu="true"><name>Welcome</name>'
                    + '<menu1>Home Page</menu1>'
                    + '<menu1>Bulletin</menu1>'
                + '</menu0>'
                + '<menu0 submenu="true"><name>Members\' Area</name>'
                    + '<menu1>Constitution &amp; Bylaws</menu1>'
                    + '<menu1 submenu="true"><name>AGM Minutes</name>'
                        + '<menu2>2012</menu2>'
                        + '<menu2>2011</menu2>'
                    + '</menu1>'
                + '</menu0>'
                + '<menu0>About</menu0>'
            + '</ddm>',
        xmlDoc = new DOMParser().parseFromString( xml, 'text/xml' ),
        html = nodeMarkup( xmlDoc.documentElement );
    document.getElementById( 'result' ).innerHTML = html;
} );

function nodeMarkup( node ){
    if( node.childNodes.length ) {
        var list = '', header = '';
        for( var index = 0; index < node.childNodes.length; index++ ) {
            if( node.childNodes[index].tagName == 'name' ) {
                header = node.childNodes[index].textContent;
            } else {
                list += nodeMarkup( node.childNodes[index] );
            };
        };
        return node.hasAttribute( 'submenu' ) 
            ? '<li>' + header + '<ul>' + list + '</ul></li>'
            : list;
    } else {
        return '<li>' + node.textContent + '</li>';
    };  
};

HTML：

<input type="button" id="parse" value="Parse" />
<ul id="result"></ul>

CSS：

#result {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

文章来源: JavaScript Recursion to format lists from XML to HTML