![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>jquery递归绑定XML代码</title>
<script src="jquery-1.2.6.min.js" type="text/javascript"></script>
<script type="text/javascript">
/*
主程式-实现递归获取数据的方法
*/
var xmlLoader =function(xml,li){
if(!xml ||li==undefined){
alert('xml error!');
return;
}
//可能这里设计的不是很好,因为有root根目录,所以每次都要判断是否有相关的属性
if(xml.getAttribute('id'))
li+='<li><a class="myclass" href='+xml.getAttribute('id')+'>'+xml.getAttribute('name')+'</a>'
if(xml.hasChildNodes())
{
if(xml.getAttribute('id'))
li+='<ul>';
for(var i=0;i<xml.childNodes.length;i++)
{
li=xmlLoader(xml.childNodes[i],li);
}
if(xml.getAttribute('id'))
li+='</ul>';
}
if(xml.getAttribute('id'))
li+='</li>';
return li;
}
//这里是jquery获取xmlNode
$(function(){
$.ajax({
type: "GET",
url: "treeview.xml",
dataType: "xml",
success: function(xml) {
var li="";
var root =xmlLoader(xml.childNodes[0],li);
$('#ul_id').html(root);
}
});
});
</script>
</head>
<body>
<ul id='ul_id'>
</ul>
</body>
</html>
以下是xml文件
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
<root>
<Type name="aaa" id="1">
<Type name="ddd" id="4">
<Type name="eee" id="5"/>
<Type name="ggg" id="6"/>
</Type>
<Type name="fff" id="1"/>
</Type>
<Type name="bbb" id="2">
<Type name="ccc" id="3"/>
</Type>
</root>
以上在VS上通过却在editplus上过不去.....