将非格式良好的 XML 文档转置为 HTML 无序列表答案

【问题标题】：Transpose non-well formed XML document to an HTML Unordered List将非格式良好的 XML 文档转置为 HTML 无序列表
【发布时间】：2013-02-23 01:38:03
【问题描述】：

我正在处理一个需要我解析 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>

我的 ajax 调用：

$.ajax({
    type: "GET",
    url: "nav.xml",
    dataType: "xml",
    success: function (xml) {
        xmlParser(xml);
    }
});

我的 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 结构。

提前致谢。

【问题讨论】：

据我所知，您的 XML 格式正确。是什么让你认为它不是？
也许我说错了，我的意思是一个非典型的 XML 结构，其中所有节点的名称都相同，或者可能有另一个术语？
嗯？他发布的 xml 格式不正确。那两个关闭标签不应该在那里。事情是，如果它的格式不正确，它就不是 xml，它是写得很糟糕的标记。或者可能不只是再看一遍......我的坏
不明亮，但更清晰
这就是我的想法，我希望所有节点都有一个结束标记不使用对吗？无论如何，这通过了，我可以遍历节点，但似乎无法分辨什么是兄弟姐妹或孩子。有没有办法将此标记添加到 UL 中？

标签： javascript jquery html xml ajax

【解决方案1】：

这个怎么样？

<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>

【讨论】：

工作得很好！谢谢你帮助我！