javascript - 格式化JSON打印出可折叠集

我正在使用Jquery Mobile打印出通过Ajax从服务器获得的一组数据。我目前可以获取它，但是当我尝试将信息输入为可折叠集格式时，它不适合使用。

我希望布局如下，其中信息存储在下拉菜单中，并在单击时显示。



但是当前信息显示在下拉菜单之外，如下所示：



有没有一种方法可以纠正此问题。我尝试将id值移动到不同的div标签，但这没有帮助。我的代码如下。感谢您的指导。

的HTML

<article data-role="content" >
    <div data-role="collapsible-set" >
        <div data-role="collapsible" id="benefitsList">
            <!--hard coded just for reference. I will be removing these h1,p tags-->
            <h1 >Benefit 1</h1>
            <p>Next Payout</p>
            <p>Date: 27 Mar</p>
            <p>Days: 0</p>
            <p>Amount: 47.00</p>
        </div>
    </div>
</article>

Java脚本

$.getJSON("http://www.mocky.io/v2/533604e8f5aa39b117bc2d26",function(data)
{
    //Loop for each element on the data
    $.each(data,function(elem)
    {
        //Create the h1 and the other elements appending them to benefits List
        $("<h1/>",
        {
            text:data[elem].reference
        }).appendTo("#benefitsList")

        $("<p/>",
        {
            text:"Date: "+ data[elem].due.date
        }).appendTo("#benefitsList")

        $("<p/>",
        {
            text:"Days: "+ data[elem].due.days
        }).appendTo("#benefitsList")

        $("<p/>",
        {
            text:"Amount: "+ data[elem].amount
        }).appendTo("#benefitsList")
    })
})

编辑：

双重输入

最佳答案

您应该对ID位置进行一些更改

<article data-role="content">
    <div data-role="collapsible-set" id="benefitsList">
        <div data-role="collapsible">
            <!--hard coded just for reference. I will be removing these h1,p tags-->
             <h1>Benefit 1</h1>

            <p>Next Payout</p>
            <p>Date: 27 Mar</p>
            <p>Days: 0</p>
            <p>Amount: 47.00</p>
        </div>
    </div>
</article>

和其他一些JavaScript调整

$.getJSON("http://www.mocky.io/v2/533604e8f5aa39b117bc2d26", function (data) {
    //Loop for each element on the data
    $.each(data, function (elem) {
        // create wrapper div
        var wrap = $("<div/>").attr('data-role', 'collapsible');
        //Create the h1 and the other elements appending them to benefits List
        $("<h1/>", {
            text: data[elem].reference
        }).appendTo(wrap);

        $("<p/>", {
            text: "Date: " + data[elem].due.date
        }).appendTo(wrap);

        $("<p/>", {
            text: "Days: " + data[elem].due.days
        }).appendTo(wrap);

        $("<p/>", {
            text: "Amount: " + data[elem].amount
        }).appendTo(wrap);
        wrap.appendTo('#benefitsList');
    });
    // finally refresh the list to recreate
    $( "#benefitsList" ).collapsibleset( "refresh" );
});

DEMO