Traverse xml recursively with JQuery

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');
}
}
});
}
);
  });

The code traverses the one level of xml. Here is the fiddle - http://jsfiddle.net/CKa6V/10/

I am looking to traverse the xml nodes recursively such that every node expands to the last child. For e.g. A expands to B, B then becomes expandable and expands to D and finally D expands to F. Similarly for all nodes.

EDIT: Sorry if the question was not clear. I am looking for the following output-

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

D
|__F 

Answer 1

I'll start with the code I've done on your previous question and modify it as below (link to the new fiddle in the end of this answer) :

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/

---

EDIT

Alright, I thought you were talking about physical expansion - as every child must be displayed.

For your tree you can do this :

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/