Question

我有这个HTML

<ul id="theList">
<li><span class="to-date" date-fromdate ="2014-12"     data-todate="2015-01">2015-01</span></li>
<li><span class="to-date" date-fromdate ="2016-12"      data-todate="2017-01">2017-01</span></li>
<li><span class="to-date" date-fromdate ="2014-12"  data-todate="now">now</span></li>
  <li><span class="to-date" date-fromdate ="2015-01"  data-todate="now">now</span></li>
</ul>

当前的JavaScript

function sortList(list) {
var $list = $(list);
var elems = $.makeArray($list.find("li"));
elems.sort(function(a, b) {
    var $aStr = $(a).find(".to-date").attr("data-todate");
    var $bStr = $(b).find(".to-date").attr("data-todate");

    var $aStrFrom = $(a).find(".to-date").attr("data-fromdate");
    var $bStrFrom = $(b).find(".to-date").attr("data-fromdate");


    if ($aStr != 'now') {
        return true;
    } else {
        return new Date($aStr) < new Date($bStr);
    }
});

$list.html(elems);
}
sortList("#theList");

我想要实现的是，当一个项目在todate attr中有“now”时，它们按来自atdate attr排序并放在列表的顶部。在todate attr中具有“now”的项目按列表底部的todate排序。

这怎么可能？

这是一个小提琴

https://jsfiddle.net/x1z47m0j/

Answer 1

我会将它们视为2种排序列表。

如果您对now进行过滤和排序并附加该组，则对其他人执行相同的操作，最后会有2种不同的排序。

// create one sorting utility plugin
$.fn.sortDates= function (dateType) {
    return this.sort(function (a, b) {
        var aString = $(a).find(".to-date").data(dateType);
        var bString = $(b).find(".to-date").data(dateType);
        return new Date(aString) > new Date(bString);
    });
};

function sortList(list) {
    var $list = $(list);
    var elems = $list.find("li");
    // filter into 2 groups
    var $now = elems.filter(function () {
        return $(this).find('.to-date').data('todate') === 'now';
    });
    var $other = elems.filter(function () {
        return $(this).find('.to-date').data('todate') !== 'now';
    });
    //sort and append each group
    $now.sortDates('fromdate').appendTo($list);

    $other.sortDates("todate").appendTo($list);

}

的 DEMO

Answer 2

传递给sort的比较函数应返回一个整数，而不是布尔值。简而言之，comparator(a, b)如果a > b则返回1，如果a < b则返回-1。如果相等则返回0。

此外，您最终对new Date('now')的某些值进行了b，这会产生无效日期。你不想搞砸那些。

只要您小心覆盖a, b（fiddle）的所有可能情况，就可以获得良好的比较功能来重现所需的顺序：

if ($aStr == 'now') {
    if ($bStr == 'now')
        return -comparator(new Date($aStrFrom), new Date($bStrFrom));
    else
        return -1;
} else if ($bStr == 'now') {
    return 1;
} else {
    return comparator(new Date($aStr), new Date($bStr));
}

function comparator(a, b) {
    return a > b ? 1 : (a == b ? 0 : -1);
}

Answer 3

仅限一种方法（fiddle） - 参见评论：

function sortList(list) {
    var $list = $(list);
    var elems = $.makeArray($list.find("li"));
    elems.sort(function (a, b) {
        var $aStr = $(a).find(".to-date").attr("data-todate");
        var $bStr = $(b).find(".to-date").attr("data-todate");

        var $aStrFrom = $(a).find(".to-date").attr('date-fromdate');
        var $bStrFrom = $(b).find(".to-date").attr('date-fromdate');

        if($aStr === 'now' && $bStr === 'now') { // if both have now - sort by from-date
           return new Date($bStrFrom).getTime() - new Date($aStrFrom).getTime(); // reverse to change sort order
        }

        if($aStr === 'now') {
            return -1; // if first have now return -1
        }

        if($bStr === 'now') {
            return 1; // if second have now return 1
        }

        return new Date($bStr).getTime() - new Date($aStr).getTime(); // if both lack now sort by to-date - reverse to change sort order
    });

    $list.html(elems);
}
sortList("#theList");

在jQuery中对具有不同条件的项进行排序

3 个答案: