javascript - jQuery Mobile の出力の問題

Question

jQuery モバイルを使用しており、折りたたみ可能な (アコーディオン) アイテムのリストを作成する必要があります。私の問題は、主な折りたたみ可能なアイテムが互いにネストされていることです。次のように、グループを分離する必要があります。

【コラプシブルワン】
   （イメージ）
   名前 A
   linkA1
   linkA2

[ COLLAPSIBLE TWO ]
   (イメージ)
   Name B
   linkB1
   linkB2


   (image)
   Name C
   linkC1
   linkC2

...


折りたたみ可能なリストは、API ページに示されているように、 積み上げられているように見えるはず

です。

{
    "actions" : [
        {
            "venue": "COLLAPSIBLE ONE",
            "event": [
                {
                    "img": "imgA.jpg",
                    "name": "Name A",
                    "location": "loc A",
                    "desc": "desc A",
                    "link1": "linkA1.html",
                    "link2": "linkA2.html"
                }
            ]
        },
        {
            "venue": "COLLAPSIBLE TWO",
            "event": [
                {
                    "img": "imgB.jpg",
                    "name": "Name B",
                    "location": "loc B",
                    "desc": "desc B",
                    "link1": "linkB1.html",
                    "link2": "linkB2.html"
                },
                {
                    "img": "imgC.jpg",
                    "name": "Name C",
                    "location": "loc C",
                    "desc": "desc C",
                    "link1": "linkC1.html",
                    "link2": "linkC2.html"
                }
            ]
        }
    ]
}

main.js

$.ajax({
    url: "output.json",
    dataType: 'json',
    success: function (data) {
        var html2 = [];
        $.each(data.actions, function(i, entry) {
                html2.push('<div data-role="collapsible" data-theme="a" data-content-theme="d" data-inset="false">')
                html2.push('<h4>'+this.venue+'</h4>');      

           $.each(this.event, function() {
                html2.push('<img src="'+this.img+'" class="img_border" alt="'+this.img+'"/>');
                html2.push('<p>'+this.name+'</p>');
                html2.push('<p>'+this.location+'</p>');
                html2.push('<a href="'+this.link1+'" target="_blank" data-role="button">Lorem</a>');
                html2.push('<a class="external" href="'+this.link2+'" target="_blank" data-role="button">Ipsum</a>');
            });
        });

        $('#cat2').append( html2.join('') ).trigger( "create" );
    } // end success
});