SQLiteからネストされたリストをJqueryで生成する

Question

jitexモバイルで、SQLiteで取得したデータを使用してグループ折りたたみリストビューを作成しようとしています。私は折りたたみ可能で、各ヘッダーグループのための「手紙」、および様々な対応する「番号」は、各グループの子になりたい

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

：

私のデータは次のようになります。 ヘッダーとそれに続く子の両方を昇順（各グループ内の子）に並べる必要があります。私は、div要素を挿入し、手紙の明確なリストを照会することにより、最初のヘッダを作成しようとしている

<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> 

：

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>'); 
     }); 

} 

だから、基本的にHTMLでの最終的な結果は次のようになります

しかし、私はどのように各ヘッダの下に 'Number'子を挿入できるのか困惑していますか？それとも私はこれについて間違った方法をとっていますか？

Answer 1

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