javascript - 为自动分频器设置自定义属性

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

首先，autodividers 仅在您的列表已按状态排序时才有效。因此，您需要在将其添加到 UL 之前对其进行排序。

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

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

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

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

Working DEMO