如何在 JavaScript 中重新排序/排序 NodeList？答案

【问题标题】：How can I reorder/sort a NodeList in JavaScript?如何在 JavaScript 中重新排序/排序 NodeList？
【发布时间】：2011-01-21 14:43:09
【问题描述】：

我有一个我认为应该是直截了当的问题；让我快速解释一下：

在我的 JavaScript 中，food.xml 被读入：

getMenuXml.open("GET","food.xml",false);
getMenuXml.send();
xmlDoc=getMenuXml.responseXML;
xmlFoodList = xmlDoc.getElementsByTagName("food");

所以现在我有一个包含所有食物元素的 NodeList xmlFoodList。到目前为止很棒。问题是我想根据内部元素<category> 对节点进行排序。我可以阅读：

xmlFoodList[i].getElementsByTagName("category")[0].childNodes[0].nodeValue

稍后在我的代码中，食品项目显示在一个列表中，正如您所期望的，我希望将同一类别的食品一起列出。所以，我的问题是：如何根据类别对 xmlFoodList 中的节点重新排序？

注意：我无法更改 food.xml 进来，并且我不想编辑我以后的代码来进行排序，因为列表已填充。我不想将 NodeList 转换为数组，因为我必须重写很多以后的代码。性能实际上并不是什么大问题，所以你可以随意克隆/嵌套循环。感谢您的宝贵时间。

【问题讨论】：

标签： javascript sorting nodelist

【解决方案1】：

如果先将 NodeList 的元素转换为数组，则可以对它们进行排序：

var foods = xmlDoc.getElementsByTagName("food");
var foodsArray = Array.prototype.slice.call(foods, 0);

那么就可以使用sort方法了：

foodsArray.sort(function(a,b) {
    var aCat = a.getElementsByTagName("category")[0].childNodes[0].nodeValue;
    var bCat = b.getElementsByTagName("category")[0].childNodes[0].nodeValue;
    if (aCat > bCat) return 1;
    if (aCat < bCat) return -1;
    return 0;
});

不过，这高度依赖于您的 XML 架构 - 例如，如果您的食物属于多个类别，则它们只会按上面代码中的第一个类别进行排序。

【讨论】：

我知道这是旧的，但它对我遇到的问题很有帮助。由于我没有将节点列表转换为数组，因此它没有在 Chrome 中正确排序。我有一个非常接近你的排序功能，一旦我转换它，它就起作用了！非常感谢！
当您将节点列表转换为数组时，您将失去对原始元素进行排序的能力。例如，假设您想按特定列对 HTML 进行排序。例如，如果您的节点列表包含表的行 (tbl.rows)，并且您对节点列表进行了排序，那么 HTML 表也将被排序。但是如果将节点列表转换为标准数组并对数组进行排序，则仅对数据进行排序。有人知道在排序后将标准数组存储回节点列表的简单方法吗？

@PaulSwarthout 如果您在排序后执行此操作，您可以对父元素中的节点进行排序：foodsArray.forEach(function(node) { node.parentNode.append(node); });

【解决方案2】：

使用 Javascript 库来获得现成的函数 w.r.t 节点列表操作是一个好主意，例如重新排序、排序、foreach 等。我推荐 YUI-3，请参考YUI-3 NodeList。

【讨论】：

没有太多关于排序的内容
@ravikirin 请详细描述一下，为什么为此引入“另一个”库是个好主意？我认为这取决于要求。

【解决方案3】：

看看这个：Xml, xsl Javascript sorting。最坏的情况是，您将数据转换为完全相同的 xml，但已排序。只要您支付了转换费用，您就可以考虑将其转换为对下一步更有用的形式。

【讨论】：