Question

我正在建立一个jQuery Mobile列表视图，并尝试由最亲近的人订购。我认为自动分频器可能是实现这一目标的最佳方法，但我是jQuery Mobile的新手，所以我愿意接受更好的建议。

当我添加列表项时，我会检测距离并通过以下方式传递：

var listItem = $('<li data-distance="' + milesFromCorrespondent + '">');

然后在autodividersSelector中我得到了这个值并按它分组项目：

$(list).listview({
        autodividers: true,
        autodividersSelector: function (li) {
            var out = li.attr('data-distance');
            return out;
        }
    }).listview('refresh');

我现在有三个值，它们按如下顺序排列：

3455 1094 1223

这是他们从我的阵列中走出来的。

是否可以通过这种方式按从低到高的顺序排序，还是有更好的方式来订购列表视图？

以下是我的完整代码：

function buildNearestCorrespondentList(correspondents) {
var list = $('#nearestCorrespondentsList');

// Find nearest correspondents
$.each(correspondents, function (index, item) {
    var milesFromCorrespondent = distance(deviceLocation[0], deviceLocation[1], item.latitude, item.longitude);

    var listItem = $('<li data-distance="' + milesFromCorrespondent + '">');
    var link = $('<a>');

    link.attr('href', '#');
    link.html(item.name + ' ' + milesFromCorrespondent + ' Miles');

    $(listItem).append(link);
    $(list).append(listItem);
});

// bind list events to page
$('#correspondentsByLocation').bind('pageinit', function () {
    $(list).listview({
        autodividers: true,
        autodividersSelector: function (li) {
            var out = li.attr('data-distance');
            return out;
        }
    }).listview('refresh');
});

}

Answer 1

这就是我的工作方式：

function buildNearestCorrespondentList(correspondents, deviceLatitude, deviceLongitude) {
var list = $('#nearestCorrespondentsList');

// get distance from device for each coorespondent
$.each(correspondents, function (index, item) {
    var milesFromCorrespondent = distance(deviceLatitude, deviceLongitude, item.latitude, item.longitude);
    item.distance = milesFromCorrespondent;
});

// sort by closest
correspondents.sort(function (a, b) {
    return a.distance > b.distance;
});

// populate list
$.each(correspondents, function (index, item) {
    var milesFromCorrespondent = distance(deviceLatitude, deviceLongitude, item.latitude, item.longitude);
    var listItem = $('<li data-distance="' + milesFromCorrespondent + '" class="nearest-correspondent">');
    var link = $('<a>');

    link.attr('href', '#');
    link.html('<span class="name">' + item.name + '</span>'
        + '<span class="locality">' + item.locality + '</span>'
        + '<span class="country">' + item.country + '</span>');

    $(listItem).append(link);
    $(list).append(listItem);
});

// bind list events to page
$('#correspondentsByLocation').bind('pageinit', function () {
    $(list).listview({
        autodividers: true,
        autodividersSelector: function (li) {
            var out = li.attr('data-distance') + ' Miles';
            return out;
        }
    }).listview('refresh');
});

// refresh if already initialised
if (isListInitialised(list)) {
    list.listview('refresh');
}

}

jQuery Mobile Auto Dividers按最低编号排序

1 个答案: