求算法,XML读取,写入HTML 结构变换

求算法
XML结构如下
(其中XML的层级不确定)
<item ID=0>
   <item ID=1>
      <item ID=11>
         <item ID=111 />
         <item ID=112 />
      </item>
      <item ID=12>
      <item ID=13>
   </item>
   <item ID=2></item>
   <item ID=3></item>
</item>以上XML结构通过JQUERY读取,生成以下HTML
<div id="div0">
<a herf="#">1</a>
<a herf="#">2</a>
<a herf="#">3</a>
</div><div id="div1">
<a herf="#">11</a>
<a herf="#">12</a>
<a herf="#">13</a>
</div><div id="div11">
<a herf="#">111</a>
<a herf="#">112</a>
</div>

解决方案 »

  1.   

    递归遍历所有结点如果当前结点有child
    就和child组合输出<div><a>...</a><a>...</a><a>...</a></div>
      

  2.   

    <?xml version="1.0" encoding="utf-8"?>
    <item id="0">
    <item id="1">
    <item id="11">
    <item id="111">
    </item>
    <item id="112">
    </item>
    </item>
    <item id="12">
    <item id="13">
    </item>
    </item>
    </item>
    <item id="2">
    </item>
    <item id="3">
    </item>
    </item>
    function creatXHR(){
    if (window.ActiveXObject) return new window.ActiveXObject('Microsoft.XMLHTTP');
    else if (window.XMLHttpRequest) return new window.XMLHttpRequest();
    else return null;
    }function make(id, xml){
    var sub = [], div = '';
    $('#' + id, xml).each(function(){
    div = '<div id="' + this.getAttribute('id') + '">'
    $('#' + id + '>item', xml).each(function(){
    div += '\n<a herf="#">' + this.getAttribute('id') + '<\/a>';
    sub.push(make(this.getAttribute('id'), xml));
    });
    div += '\n<\/div>\n';
    });
    div += sub.join('\n');
    return div;
    }var xhr = creatXHR();
    xhr.open('GET', 'xml.xml');
    xhr.onreadystatechange = function(){
    if (xhr.readyState == 4 && xhr.status == 200) {
    alert(make(0, xhr.responseXML));
    }
    }
    xhr.send(null);
      

  3.   

    递归出来的DIV是嵌套的，而不是平行的
    要求是任何一层读取出来，是平行的，同一层放在同一个DIV里
      

  4.   

    懒的写ajax请求部分的代码，读取部分模拟的，ie的childNodes
    属性不计算非Html标记所以此程序只能在Firefox下运行。<!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
    <title>无标题文档</title>
    <script type="text/javascript">
    function $(sId){
    return document.getElementById(sId);
    }function getSubNodes(oNode){
    var aChildNodes=oNode.childNodes;
    var i,nLen=aChildNodes.length;
    var aSubNodes=[];

    for(i=0;i<nLen;i++){
    if(aChildNodes[i].tagName){
    aSubNodes.push(aChildNodes[i]);
    }
    }

    return aSubNodes;
    }function outputNode(oNode,nMargin){
    var sId=oNode.getAttribute("ID");
    var aSubNodes=getSubNodes(oNode);
    var i,nLen=aSubNodes.length;

    alert("id="+sId+",childNodesCount="+nLen);
    if(nLen>0){
    var oDiv,aHtml=[];
    oDiv=document.createElement("div");
    document.body.appendChild(oDiv);
    oDiv.id="div"+sId;
    oDiv.style.marginLeft=nMargin+"px";

    for(i=0;i<nLen;i++){
    aHtml.push(
    "<a href='#'>"
    +aSubNodes[i].getAttribute("ID")
    +"</a>　");
    outputNode(aSubNodes[i],nMargin+30);
    }

    oDiv.innerHTML=aHtml.join("");
    }
    }window.onload=function(){
    var oRoot=$("divData").getElementsByTagName("item")[0];
    outputNode(oRoot,0);
    }
    </script>
    </head>
    <body><!--数据区开始-->
    <div id="divData" style="display:none">
        <item ID="0">
          <item ID="1">
              <item ID="11">
                <item ID="111"></item>
                <item ID="112"></item>
              </item>
              <item ID="12"></item>
              <item ID="13"></item>
          </item>
          <item ID="2">
              <item ID="21"></item>
              <item ID="22"></item>      
          </item>
          <item ID="3"></item>
        </item>
    </div>
    <!--数据区结束--></body>
    </html>