如何在 JavaScript 中对 NodeList 进行重新排序/排序？

Question

我有一个我认为应该是一个简单的问题；让我快速解释一下：

在我的 JavaScript 中，food.xml 是用以下方式读取的：

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

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

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

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

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

Answer 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 模式 - 例如，如果您有属于多个类别的食物只会按上面代码中的第一个类别进行排序。

Answer 2

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

Answer 3

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