js循环nodelist,如何在JavaScript中对NodeList进行重新排序/排序？

I have what I think should be a straightforward question; let me quickly explain:

In my JavaScript, food.xml is read in with:

getMenuXml.open("GET","food.xml",false);

getMenuXml.send();

xmlDoc=getMenuXml.responseXML;

xmlFoodList = xmlDoc.getElementsByTagName("food");

so that now I have a NodeList xmlFoodList with all the food elements. Great so far. The problem is I want to sort the nodes based on an element inside. I can read that with:

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

Later in my code, the food items are displayed in a list, and as you'd expect, I want food of the same category to be listed together. So, my question is: How can I reorder the nodes in xmlFoodList based on their category?

Notes: I can't change food.xml coming in, and I don't want to edit my later code to do the sorting as the list is populated. I don't want to convert the NodeList to an array, since I'd have to rewrite a lot of later code. Performance isn't actually much of a concern, so feel free to clone/nested loop all you want. Thanks for your time.

解决方案

You can order the elements of the NodeList, if you convert them to an array first:

var foods = xmlDoc.getElementsByTagName("food");

var foodsArray = Array.prototype.slice.call(foods, 0);

Then you can use the sort method:

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;

});

This is highly dependent on your XML schema though - if, for example, you had foods which were in more than one category they would only be sorted by the first category in the code above.