HTML5 listview with grouping

Question

This是我的樣本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); 
} 

這裏是工作提琴：http://jsfiddle.net/q5zY7/3/