jQuery Mobile Auto Dividers 按最低数字排序答案

【问题标题】：jQuery Mobile Auto Dividers order by lowest numberjQuery Mobile Auto Dividers 按最低数字排序
【发布时间】：2014-07-02 13:45:27
【问题描述】：

我正在构建一个 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');
});

}

【问题讨论】：

自动分隔符对排序/排序没有帮助，它们只是将具有共同属性的相邻项目分组（例如，以相同的字母开头）。您需要先按距离对通讯员进行排序，然后以正确的顺序将它们附加到列表视图中。你也可以看看这个插件：andymatthews.net/code/jqm-tinysort
好的，谢谢。我希望列表视图中会内置一些我还没有找到的东西，但我想我只能用艰难的方式去做......

标签： jquery-mobile jquery-mobile-listview

【解决方案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');
}

}

【讨论】：