javascript - 带分组的 HTML5 ListView

Question

This是我的 sample listview在HTML5与分组。我不知道这里出了什么问题。分组也将采用其余类别。任何帮助都将非常感激。

如果问题不清楚，请告诉我。

提前致谢

Answer 1

你可以像下面这样做；

$(document).ready(function () {
 loadlist();
});
var groupedData = [
    { name: "Sashimi salad", age: "12" },
    { name: "Chirashi sushi", age: "12" },
    { name: "Seaweed salad", age: "12" },
    { name: "Edamame", age: "14" },
    { name: "Miso soup", age: "14" },
    { name: "Maguro", age: "14" },
    { name: "Shake", age: "14" },
    { name: "Shiromi", age: "14" },
    { name: "Tekka maki", age: "15" },
    { name: "Hosomaki Mix", age: "15" },
    { name: "California rolls", age: "18" },
    { name: "Seattle rolls", age: "18" },
    { name: "Spicy Tuna rolls", age: "18" },
    { name: "Ebi rolls", age: "22" },
    { name: "Chicken Teriyaki", age: "22" },
    { name: "Salmon Teriyaki", age: "22" },
    { name: "Gohan", age: "22" },
    { name: "Tori Katsu", age: "41" },
    { name: "Yaki Udon", age: "41" }
];
var ages = [];
function loadlist() {
    var mAge = 0;
    $.ajax({
        success: function (msg) {
            $.each(groupedData, function(key, value) {
                if($.inArray(value.age, ages) < 0){
                     ages.push(value.age);
                }
            });
            var header = "";
            $.each(ages, function(key, value) {
               header += "<ul>" + value;
               $.each(groupedData, function (i, item1) {
                if (value == item1.age) {
                    header += "<li>" + item1.name + "</li>";
                }

              }); 
             header += "</ul>";
            });
            $(".list").html(header);
        },
        error: Error
    });
}
function Error(result) {            
    messageBox( result.status + '' + result.statusText);
}

这是一个工作 fiddle :http://jsfiddle.net/q5zY7/3/