jquery - 附加到可折叠集合的最后一个元素的列表

Question

我正在尝试创建动态可折叠集，并为每个集添加动态列表视图。

这是我的做法：

    function querySuccess(tx, results) {

        $.each(results.rows,function(index){ 
           var row = results.rows.item(index);
           var list=$('#List').append('<li><h3 class="ui-li-heading">'+'</h3><p class="ui-li-">'+row['data']+'</p></li>');

           var div = '<div data-role="collapsible" data-inset="false" data-iconpos="right"><h3>'+row["data"]+'</h3></div>';

           $(list).appendTo(div).parent().appendTo('[data-role="content"]').end().trigger("create");
           $('div[data-role=collapsible]').collapsible({theme:'c',refresh:true});

        });         
     } 

但是动态列表视图仅附加到最后一个可折叠元素，而不能附加到其他元素。我犯了什么错误？