<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