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

shootarrow 2009-06-18 12:20:56
求算法
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>
...全文
102 6 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
6 条回复
切换为时间正序
请发表友善的回复…
发表回复
fosjos 2009-06-18
  • 打赏
  • 举报
回复
递归遍历所有结点

如果当前结点有child
就和child组合输出<div><a>...</a><a>...</a><a>...</a></div>
fosjos 2009-06-18
  • 打赏
  • 举报
回复
[Quote=引用 4 楼 shootarrow 的回复:]
递归出来的DIV是嵌套的,而不是平行的
要求是任何一层读取出来,是平行的,同一层放在同一个DIV里
[/Quote]
遍历是递归,但是输出可以用个全局变量,就不会嵌套了
  • 打赏
  • 举报
回复
懒的写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>
shootarrow 2009-06-18
  • 打赏
  • 举报
回复
递归出来的DIV是嵌套的,而不是平行的
要求是任何一层读取出来,是平行的,同一层放在同一个DIV里
monexus 2009-06-18
  • 打赏
  • 举报
回复
<?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);

87,997

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧