Question

我试图划分在jQuery-mobile中动态填充的ListView。我正在设置一些属性status="true"和一些status="false"的列表项，并想知道是否可以自动将它们分成两组（已下载/未下载）？

这是我的HTML：

<div role="main" class="ui-content jqm-content">
    <div>
        <ul id="linkList" data-role="listview" data-autodividers="true">
        </ul>
    </div>
</div>

我的JS：

var $li;
var $status = 'false';

window.resolveLocalFileSystemURL(fileSource + val.title + ".pdf", success, fail);

// if file exists
function success() {
    $li.find("a").on("click", function(){ openPdf(val.title); });
    $status = 'true';
}

// if file doesnt exists
function fail() {
    $li.find("a").on("click", function(){ downloadPdf(val.title,val.url); });
    $status = 'false';
}

$li = $("<li><a href='#' status=''+status+''>"+val.title+"</a></li>");

$("#linkList").append($li).listview('refresh');
$("#linkList").listview({
    autodividers: true,
    autodividersSelector: function (li) {
    var out = li.attr('status');
    return out;
    }
}).listview('refresh');

那么，是否可以自动执行此操作，或者是否必须按代码进行排序，并添加分隔符。代码本身并没有添加任何分隔符。

Answer 1

首先，如果您的列表已按状态排序，则自动转移器才能正常工作。因此，在将其添加到UL之前，您需要对其进行排序。

接下来，对于状态，您可以在LI上使用数据属性或在li：

中使用锚点

'<li ><a href="#" data-status="' + item.status +'">' + item.val + '</a></li>'

然后在添加项目时，设置autodividersSelector以检索锚点上的数据属性：

$('#linkList')
    .empty()
    .append(allfiles)
    .listview({
        autodividers:true,
        autodividersSelector: function ( li ) {
            var out = li.find('a').data("status");
            return out;
        }
    })
    .listview("refresh");

正在使用 DEMO

为autidividers设置自定义属性

1 个答案: