jquery - 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 の 1 つのレベルをトラバースします。これがフィドルです - 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