javascript - JQuery 移动列表前置

Question

尝试在 jquery mobile 中添加我的列表，但我无法将分隔线置于添加到 ListView 的最新项目的顶部。

我尝试预先添加要添加的项目，但随后它会将分隔线切换到底部。

function loadScanItems(tx, rs) {
    var rowOutput = "";
    var $scanItems = $('#scanItems');
    $scanItems.empty();
    var bubbleCount = 0;
    for (var i = 0; i < rs.rows.length; i++) {
        bubbleCount = bubbleCount + 1;
        //rowOutput += renderScan(rs.rows.item(i));
        var row = rs.rows.item(i)
        var now = row.added_on;
        var date = get_date(now);
        rowOutput += '<li data-icon="false"><a href="javascript:void(0);" onclick="webdb.deleteScan(' + row.ID + ');"><div class="ui-grid-b"><div class="ui-block-a" style="width:50%"><h3>Su # ' + row.sunum + '</h3><p> Bin # ' + row.binnum + '</p></div><p class="ui-li-aside"><strong>' + date + '</strong></p><div class="ui-block-b" style="width:20%"></div><div class="ui-block-c" style="width:25%"><br><p>User: ' + row.userid + '</p></div></div></a></li>';
        // rowOutput += '<li><a href="#">' + row.sunum + row.binnum+ "<a href='javascript:void(0);'  onclick='webdb.deleteScan(" + row.ID + ");'>Delete</a></a></li>";
    }
    $scanItems.append('<li data-role="list-divider">Scanned Items <span class="ui-li-count">' + bubbleCount + '</span></li>').listview('refresh');
    $scanItems.append(rowOutput).listview('refresh');
}

上面的代码格式正确，分隔线位于顶部，但列表项附加到底部而不是添加到顶部。

谢谢!

Answer 1

问题是您正在构建一个包含所有扫描项目的字符串。该字符串已经有一个顺序，因此无论您添加还是添加都没有区别。尝试这个简单的改变。

更改:

rowOutput += '<li data-icon="false">...</li>';

至:

rowOutput = '<li data-icon="false">...</li>' + rowOutput;

这将在附加到 ListView 之前将您的 rowOutput 字符串按正确的顺序排列。

Here is a working DEMO