使用 Javascript 对 XML 数据进行排序

Question

我需要一些关于 JavaScript 的帮助。我正在使用 XML，所以我需要在其上实现 JavaScript，并且我想对元素节点名称进行排序。请看下图，这将使您清楚我在说什么。请我想要 JavaScript 而不是 Jquery 的代码。

Live Fiddle

---

UnSorted:                                   Sorted:

bookstore                                   bookstore
  xbook                                         abook
     title                                         author
     author                                        price
     year                                          title
     price                                         year
  cbook                                        cbook
  gbook                                        gbook
  abook                                        xbook    

---

function generate(node) {
    if (node.nodeType != 1) return "";
    var html = "<li>" + node.nodeName;
    var htmlForChildNodes = "";
    for (var i = 0; i < node.childNodes.length; i++) {
        htmlForChildNodes += generate(node.childNodes[i]);
    }
    if (htmlForChildNodes) {
        html += "<ul>" + htmlForChildNodes + "</ul>";
    }
    html += "</li>";
    return html;
}

---

谢谢

Answer 1

您应该解析 xml 文档并将其放入 javascript 对象数组中。这些很容易排序。

因此，与其调用 generate(xmlDoc.documentElement) 并让它直接从 xml 返回 html，不如添加一个 parse(xmlDoc.documentElement) 函数来返回数组数组。之后更改您的 generate() 函数以获取一个具有 children 属性的对象，该属性是一个数组，而不是原始的 xml dom。

解析应该如下所示：

function parse(node) {
    if (node.nodeType != 1) return null;
    var result = {name: node.nodeName};
    var children = [];
    for (var i = 0; i < node.childNodes.length; i++) {
        var child = parse(node.childNodes[i]);
        if (child)
        {
            children.push(child);
        }
    }
    result.children = children;
    return result;
}

现在您可以通过创建your own comparator function 对带有子元素的数组进行排序。

排序后调用（更改后的）generate() 函数，该函数将遍历对象/数组以生成 html。

Here is a fiddle。我已将 generate() 函数的更改留给您。 （使用浏览器控制台检查生成的数据结构）