Question

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

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

Benefit1

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

Benefit2

有没有办法可以解决这个问题。我尝试将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>

的Javascript

$.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")
    })
})

编辑：

重复录入

Duplicate Entry

Answer 1

您应该对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

为可折叠集格式化JSON打印输出

1 个答案: