我想知道是否有人可以提供帮助，我确信这是一件非常简单的事情，但我现在已经“搜索”了一些，并且找到了一些对我不起作用的结果。
基本上我有一个xml文件（data.xml），结构如下
<data>
<food>
<name>Belgian Waffles</name>
<group>waffle</group>
<price>$5.95</price>
<description>Two of our famous Belgian Waffles with plenty of real maple syrup</description>
<calories>650</calories>
</food>
<food>
<name>Strawberry Belgian Waffles</name>
<group>waffle</group>
<price>$7.95</price>
<description>Light Belgian waffles covered with strawberries and whipped cream</description>
<calories>900</calories>
</food>
<food>
<name>Berry-Berry Belgian Waffles</name>
<group>waffle</group>
<price>$8.95</price>
<description>Light Belgian waffles covered with an assortment of fresh berries and whipped cream</description>
<calories>900</calories>
</food>
<food>
<name>French Toast</name>
<group>Toast</group>
<price>$4.50</price>
<description>Thick slices made from our homemade sourdough bread</description>
<calories>600</calories>
</food>
<food>
<name>Homestyle Breakfast</name>
<group>Toast</group>
<price>$6.95</price>
<description>Two eggs, bacon or sausage, toast, and our ever-popular hash browns</description>
<calories>950</calories>
</food>
</data>
所以我想做的是显示按“组”分组的数据，并按字母顺序排列父母和子女，如下所示
Waffle
Belgian Waffles
Berry-Berry Belgian Waffles
Strawberry Belgian Waffles
...
Toast
French Toast
Homestyle Breakfast
...
我将使用html，jQuery / ajax，data.xml文件
我希望有人可以帮助完整的n00b！
提前致谢
答案 0 :(得分：0)
我在这个例子中使用了以下内容：
操作Literal对象比使用XML中的节点容易。
$(function() {
$.ajax({
url: "https://gist.githubusercontent.com/dannyjhonston/c8bb58e329252882aa8f/raw/a29755923ea1d43af4413405b77a5ef02e9efd6c/data.xml",
type: "GET",
dataType: "xml",
}).done(function(response) {
var x2js = new X2JS(); // Declare an instance from X2JS().
var json = {}; // Declare the json object.
var oSerializer = new XMLSerializer(); // Declare an instance from XMLSerializer().
// $(response).find("data")[0] contains a document fragment from the response xml.
var xmlString = oSerializer.serializeToString($(response).find("data")[0]); // Serialize the document fragment into XML string.
json = x2js.xml_str2json(xmlString); // Convert the XML string to JSON.
// By using Javascript we can sort array of objects.
// Sorting the group.
json.data.food = json.data.food.sort(function(a, b) {
return a.group - b.group;
});
var x = {}; // Declare an object to store the ordered data.
// json.data.food contains an array of objects.
for (var i = 0; i < json.data.food.length; ++i) {
var obj = json.data.food[i];
if (x[obj.group] === undefined) {
x[obj.group] = [];
}
x[obj.group].push(obj);
}
// Sorting the names.
for (i in x) {
x[i] = x[i].sort(function(a, b) {
return b.name < a.name;
});
}
// Printing the list in the page.
$.each(x, function(a, b) {
$("#list").append("<li>" + a + "<ul id=\"" + a + "\"></ul></li>"); // Print the group values.
for (var i = 0; i < b.length; i++) {
$("#list #" + a).append("<li>" + b[i].name + "</li>"); // Print the name of each group.
}
});
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://x2js.googlecode.com/hg/xml2json.js"></script>
<ul id="list"></ul>
希望这有帮助。
更新：使用.toLowerCase()函数对小写字母进行排序。
我在<ul>列表中使用了动态ID。 ul标记中的id属性必须没有空格，然后我使用：.replace(" ", "").replace(" ", "")。你可以在DOM中看到。
$(function() {
$.ajax({
url: "https://gist.githubusercontent.com/JimBobUKII/1ecb51bce61b5b03ebad/raw/2f65f896b197b68ece6cbdfa116b8e645f9b732a/data.xml",
type: "GET",
dataType: "xml",
}).done(function(response) {
var x2js = new X2JS(); // Declare an instance from X2JS().
var json = {}; // Declare the json object.
var oSerializer = new XMLSerializer(); // Declare an instance from XMLSerializer().
// $(response).find("data")[0] contains a document fragment from the response xml.
var xmlString = oSerializer.serializeToString($(response).find("data")[0]); // Serialize the document fragment into XML string.
json = x2js.xml_str2json(xmlString); // Convert the XML string to JSON.
// By using Javascript we can sort array of objects.
// Sorting the group.
json.data.food = json.data.food.sort(function(a, b) {
return a.group.toLowerCase() < b.group.toLowerCase();
});
var x = {}; // Declare an object to store the ordered data.
// json.data.food contains an array of objects.
for (var i = 0; i < json.data.food.length; ++i) {
var obj = json.data.food[i];
if (x[obj.group] === undefined) {
x[obj.group] = [];
}
x[obj.group].push(obj);
}
// Sorting the names.
for (i in x) {
x[i] = x[i].sort(function(a, b) {
return b.name.toLowerCase() < a.name.toLowerCase();
});
}
// Printing the list in the page.
$.each(x, function(a, b) {
$("#list").append("<li>" + a + "<ul id=\"" + a.replace(" ", "").replace(" ", "") + "\"></ul></li>"); // Print the group values.
for (var i = 0; i < b.length; i++) {
$("#list #" + a.replace(" ", "").replace(" ", "")).append("<li><a href=\"#" + b[i].id + "\">" + b[i].name + "</a></li>"); // Print the name of each group.
}
});
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://x2js.googlecode.com/hg/xml2json.js"></script>
<ul id="list"></ul>