Jquery - 從SQLite生成嵌套列表

Question

我想在jQuery的移動使用通過SQLite檢索的數據創建一個組可摺疊列表視圖。

我的數據看起來是這樣的：

Letter | Number 
A  | 1 
A  | 2 
B  | 3 
B  | 4 
C  | 5 

我想每個標題組是可摺疊一個「信」，以及各種相應的「數字」是各組的孩子。 標題和隨後的孩子都應該按照升序排列（孩子在他們各自的羣體中）。

所以基本上最終結果以HTML會是這個樣子：

<div data-role="collapsible-set" id="LetterList" data-filter="true" data-filter-reveal="false"> 

<div data-role="collapsible" class="collapseclass"> 
<h2>A</h2> 
<ul data-role="listview"> 
<li><a href="#">1</a></li> 
<li><a href="#">2</a></li> 
</ul> 
</div> 

<div data-role="collapsible" class="collapseclass"> 
<h2>B</h2> 
<ul data-role="listview"> 
<li><a href="#">3</a></li> 
<li><a href="#">4</a></li> 
</ul> 
</div> 

<div data-role="collapsible" class="collapseclass"> 
<h2>C</h2> 
<ul data-role="listview"> 
<li><a href="#">5</a></li> 
</ul> 
</div> 

</div> 

我試圖首先創建頭，通過查詢信件的不同列表，然後插入的div：

function querySuccessDistinctLetter(tx, result) { 

     $('#LetterList').empty(); 
     $.each(result.rows, function (index) { 
      var row = result.rows.item(index); 
      $('#LetterList').append('<div data-role="collapsible" class="collapseclass"><h2>' + row['Letter'] + '</h2></div>'); 
     }); 

} 

但是現在我難以理解如何在每個標題下插入'Number'子元素？還是我以錯誤的方式去做這件事？

Answer 1

你可以用一個查詢來做到這一點。確保通過信然數排序查詢所以結果看起來是這樣的：

var result = { 
    rows: [ 
    {Letter: "A", number: 1}, 
    {Letter: "A", number: 2}, 
    {Letter: "B", number: 3}, 
    {Letter: "B", number: 4}, 
    {Letter: "B", number: 5}, 
    ] 
}; 

通過行步進，看到然後建立HTML標記時字母改變：

var curLetter; 
    var html = ''; 
    $('#LetterList').empty(); 
    for (var i=0; i < result.rows.length; i++){ 
    var row = result.rows[i]; 
    var letter = row.Letter; 
    var number = row.number; 

    if (letter != curLetter){ 
     if (i > 0) html += '</ul></div>'; 
     curLetter = letter; 
     html += '<div data-role="collapsible" class="collapseclass"><h2>' + letter + '</h2><ul data-role="listview">'; 
    } 
    html += '<li><a href="#">' + number + '</a></li>'  
    } 
    $('#LetterList').append(html).enhanceWithin(); 

DEMO