使用JQuery递归遍历xml

Question

    <div id="page-wrap"></div>

    $(document).ready(function(){
       var xml = "<root> \
            <method name='A'> \
            <childcall name='B'></childcall> \
            <childcall name='C'></childcall> \
            </method> \
            <method name='B'> \
            <childcall name='D'></childcall> \
            </method> \
            <method name='C'> \
            <childcall name='D'></childcall> \
            <childcall name='E'></childcall> \
            </method> \
            <method name='D'> \
            <childcall name='F'></childcall> \
            </method> \
            </root>";

        var data = $.parseXML(xml);
        console.log(data);
        //alert(data);

        var htmltxt="<ul>";
        $(data).find('method').each(traverseXml);
        htmltxt = htmltxt + "</ul>";
        //alert(htmltxt);
        $("#page-wrap").html(htmltxt);

     function traverseXml(data){
            var namenode = $(this).attr('name');
            var count = 0;
            $(this).children('childcall').each(function(){ count++; });
            if(count>0){
                htmltxt = htmltxt + "<li class='category'>" + namenode +"<ul>";

                $(this).children('childcall').each(function(){ 
                        var name = $(this).attr('name');
                        htmltxt = htmltxt + "<li>" + name + "</li>";    
                });
                htmltxt = htmltxt + "</ul></li>";
            }else{
                htmltxt = htmltxt +"<li>"+namenode+"</li>";
            }
         }




$('li.category').addClass('plusimageapply');
$('li.category').children().addClass('selectedimage');
$('li.category').children().hide();
$('li.category').each(
function(column) {
$(this).click(function(event){
if (this == event.target) {
if($(this).is('.plusimageapply')) {
$(this).children().show();
$(this).removeClass('plusimageapply');
$(this).addClass('minusimageapply');
}
else
{
$(this).children().hide();
$(this).removeClass('minusimageapply');
$(this).addClass('plusimageapply');
}
}
});
}
);
  });

代码遍历xml的一个级别。这是小提琴 - http://jsfiddle.net/CKa6V/10/

我希望递归遍历xml节点，以便每个节点都扩展到最后一个子节点。对于例如A扩展为B，B然后变为可扩展并扩展为D，最后D扩展为F.同样适用于所有节点。

编辑：对不起，如果问题不明确。我正在寻找以下输出 -

A
|__B
   |__D
      |__F
|__C
   |__D
      |__F
   |__E
B
|__D
   |__F
C
|__D
   |__F
|__E

D
|__F 

Answer 1

我将从the code I've done on your previous question开始并按如下所示进行修改（链接到此答案末尾的新小提琴）：

JS：

var xml = "<root> \
            <method name='A'> \
            <childcall name='B'></childcall> \
            <childcall name='C'></childcall> \
            </method> \
            <method name='B'> \
            <childcall name='D'></childcall> \
            </method> \
            <method name='C'> \
            <childcall name='D'></childcall> \
            <childcall name='E'></childcall> \
            </method> \
            </root>";

        var data = $.parseXML(xml);
        console.log(data);
        var curLi = [];
        $(data).find('method').each(function(){
            var hasChild = $(this).children('childcall').length > 0;
            curLi.push('<li');
            curLi.push(((hasChild) ? ' class="category plusimageapply">': '>'));
            curLi.push($(this).attr('name'));
            if(hasChild){
                curLi.push('<ul>');
                 $(this).children('childcall').each(function(){
                     var name = $(this).attr('name');
                     curLi.push('<li><a href="'+name+'">'+name+'</a></li>');
                 });
                curLi.push('</ul>');
            }
            curLi.push('</li>');
         });
        $('#test').append(curLi.join(''));

$('li.category').click(function(event){
    if($(this).is('.plusimageapply')) {
        $(this).children().show();
        $(this).removeClass('plusimageapply');
        $(this).addClass('minusimageapply');
    }
    else
    {
        $(this).children().hide();
        $(this).removeClass('minusimageapply');
        $(this).addClass('plusimageapply');
    }
});

HTML：

<ul id="test">

</ul>

http://jsfiddle.net/dujRe/9/

---

修改

好吧，我以为你在谈论身体扩张 - 因为每个孩子都必须展示。

对于您的树，您可以这样做：

JS：

var data = $.parseXML(xml);
var curLi = [];
function parseBranch(l){
    var b = $(data).find('method[name='+l+']');
    if(b.length > 0){
        curLi.push('<ul>');
    }
    b.each(function(){
        $(this).children('childcall').each(function(){
            var name = $(this).attr('name');
            curLi.push('<li><a href="'+name+'">'+name+'</a>');
            parseBranch(name); // recursion here
            curLi.push('</li>');
        });
    });
    if(b.length > 0){
        curLi.push('</ul>');
    }
}
$(data).find('method').each(function(){
    var hasChild = $(this).children('childcall').length > 0;
    curLi.push('<li');
    curLi.push(((hasChild) ? ' class="category plusimageapply">': '>'));
    curLi.push($(this).attr('name'));
    if(hasChild){
        curLi.push('<ul>');
        $(this).children('childcall').each(function(){
            var name = $(this).attr('name');
            curLi.push('<li><a href="'+name+'">'+name+'</a>');
            parseBranch(name);
            curLi.push('</li>');
        });
        curLi.push('</ul>');
    }
    curLi.push('</li>');
});
$('#test').append(curLi.join(''));

$('li.category').click(function(event){
    if($(this).is('.plusimageapply')) {
        $(this).children().show();
        $(this).removeClass('plusimageapply');
        $(this).addClass('minusimageapply');
    }
    else
    {
        $(this).children().hide();
        $(this).removeClass('minusimageapply');
        $(this).addClass('plusimageapply');
    }
});

http://jsfiddle.net/dujRe/10/