将非格式良好的XML文档转换为HTML无序列表
Transpose non-well formed XML document to an HTML Unordered List
我正在进行一个项目,该项目要求我解析XML树,其中XML不是很好。我需要从XML定义一个UL结构,但问题是所有节点都是具有不同属性的相同名称。我使用jQuery ajax函数来调用这个XML文件并在成功时返回它。这是我的难题:
> <class name="Juice">
> <class name="OJ">
> <class name="Low Sugar" />
> <class name="Some Pulp" />
> </class>
> <class name="Apple" />
> <class name="Grape" />
> </class>
可以看到,节点名称使得很难将其转换为统一列表。我试图让它递归,看起来像这样:
<ul>
<li>Juice
<ul>
<li>OJ
<ul>
<li>Low Sugar</li>
<li>Some Pulp</li>
</ul>
</li>
<li>Apple</li>
<li>Grape</li>
</ul>
</li>
</ul>
my ajax call:
$.ajax({
type: "GET",
url: "nav.xml",
dataType: "xml",
success: function (xml) {
xmlParser(xml);
}
});
my xmlParser函数:
function xmlParser(xml) {
$(xml).find("class class").each(function () {
var cname = $(this).attr("name");
if ($(this).children.length > 0) {
$("#nav .categories").append("<li id='" + cname + "'><a href='#'>" + cname + "</a></li>");
$(xml).find("[name='" + cname + "']").children().each(function () {
var cname1 = $(this).attr("name");
$("#" + cname).append("<ul></ul>");
$("#" + cname + " ul").append("<li id='" + cname1 + "'><a href='#'>" + cname1 + "</a></li>");
});
} else {
$("#nav .categories").append("<li id='" + cname + "'><a href='#'>" + cname + "</a></li>");
}
});
}
我想要添加无序列表的页面上的HTML:
<ul id="nav" class="categories"></ul>
这最终会复制一些代码,而不是递归的,我想得到一些东西,我可以回忆parseXml函数并传递一些参数,其中元素在树中不重复。我宁愿丢弃这个函数,用一个更干净、更整洁的东西重新开始。
是否有任何jQuery插件已经这样做了。我已经检查了这个网站和谷歌,但没有我正在寻找这个坏的XML作品。我发现所有其他的都使用了格式良好的XML结构。
这个怎么样?
<html>
<body>
<script>
var isIE = (window.attachEvent);
var txt = "<class name='"Juice'"><class name='"OJ'"><class name='"Low Sugar'" /><class name='"Some Pulp'" /></class><class name='"Apple'" /><class name='"Grape'" /></class>";
var doc = NewXmlDoc(txt);
var output = "<ul>";
WalkTree(doc.documentElement);
output+="</ul>";
alert( output );
function WalkTree(node)
{
output += "<li>"+node.getAttribute("name");
if (node.childNodes.length > 0)
{
output += "<ul>";
for (var inx = 0; inx < node.childNodes.length; inx++)
{
var childNode = node.childNodes[inx];
WalkTree(childNode);
}
output += "</ul>";
}
output += "</li>";
}
function NewXmlDoc(sXml)
{
var xmlDoc;
if (isIE)
{
xmlDoc = new ActiveXObject("Microsoft.XMLDOM")
xmlDoc.async = false;
xmlDoc.loadXML(sXml);
if (xmlDoc.parseError.errorCode != 0)
return null;
}
else if (document.implementation && document.implementation.createDocument)
xmlDoc = (new DOMParser()).parseFromString(sXml, "text/xml");
return xmlDoc;
}
/* Result is...
<ul>
<li>Juice
<ul>
<li>OJ
<ul>
<li>Low Sugar</li>
<li>Some Pulp</li>
</ul>
</li>
<li>Apple</li>
<li>Grape</li>
</ul>
</li>
</ul>
*/
</script>
相关文章:
- Html画布自由转换
- 强制转换 HTML 对象元素
- js/jquery/other library插件来转换HTML->XML
- 如何转换 HTML DOM 结构
- 如何在javascript中正确转换html
- 转换HTML画布内容,在laravel后端向其发送角度形式的数据请求
- 使用JavaScript(RegExp)转换HTML实体
- 函数无法转换html
- wkhtmltopdf转换html到pdf得到JavaScript执行超时异常
- 转换html页面表示为文本到dom对象
- 使用客户端JavaScript来转换HTML页面而不是从服务器发送多个HTML页面是明智的吗?
- 需要转换HTML表格在CSS与提交表单
- 转换HTML 5画布图纸格式可读的3D打印机
- 任何javascript内置函数转换HTML实体从url传递
- 如何在文档中转换HTML元素
- 转换HTML文本框完全只读
- 垂直分页转换:HTML, CSS, Javascript
- Meteor:我如何转换HTML/HTML5代码来使用Meteor
- 用于转换 HTML 代码的模板
- 点击按钮转换html页面图像和下载使用JS,Jquery