重新订购li&x27；s按JavaScript中li中的时间顺序排列

我有一些销售数据，它是由ajax加载到ul中的，id为ajaxInner。不幸的是，这些li没有按时间顺序追加。我如何创建一个JavaScript函数来按时间跨度中的时间将这些li排序为时间顺序。我想这是一个函数，我可以调用后，每一个新的李是附加的，所以它会考虑到所有的李在列表中，并重新排序他们相应的时间

<ul id="ajaxInner">
    <li><span class="transactTime">10:13 - </span><span class="transactAmount">£444</span><br><img src="images/orangeMarker.png" class="mapMarker"><span class="transactCity">Stoke-on-trent (Stoke-On-Trent, United Kingdom)</span></li>
    <li><span class="transactTime">10:08 - </span><span class="transactAmount">£56</span><br><img src="images/orangeMarker.png" class="mapMarker"><span class="transactCity">Belper (Derbyshire, United Kingdom)</span></li>
    <li><span class="transactTime">10:15 - </span><span class="transactAmount">£39</span><br><img src="images/orangeMarker.png" class="mapMarker"><span class="transactCity">Stoke-on-trent (Stoke-On-Trent, United Kingdom)</span></li>
    <li><span class="transactTime">10:14 - </span><span class="transactAmount">£459</span><br><img src="images/orangeMarker.png" class="mapMarker"><span class="transactCity">Belper (Derbyshire, United Kingdom)</span></li>
    <li><span class="transactTime">10:16 - </span><span class="transactAmount">£1057</span><br><img src="images/orangeMarker.png" class="mapMarker"><span class="transactCity">Scarborough (North Yorkshire, United Kingdom)</span></li>
    <li><span class="transactTime">10:11 - </span><span class="transactAmount">£107</span><br><img src="images/orangeMarker.png" class="mapMarker"><span class="transactCity">Scarborough (North Yorkshire, United Kingdom)</span></li>
</ul>

但是，这并不总是按时间顺序排序，您会得到一些奇怪的结果，时间在顶部，这不应该是这样的。

尝试以下方法：

function sortList() {
    var ul = $('#ajaxInner');
    var li = ul.children("li");

    li.detach().sort(function(a, b) {
        var date1 = new Date (new Date().toDateString() + ' ' + $(a).children('span.transactTime').text().substr(0,5))
        var date2 = new Date (new Date().toDateString() + ' ' + $(b).children('span.transactTime').text().substr(0,5))
        var result = (date1 < date2) ? -1 : (date1 > date2) ? 1 : 0
        return result;
    });

    ul.append(li);
}

函数排序列表（）{
var ul=$（“#ajaxInner”）；
var li=ul.儿童（“li”）；
li.detach（）.sort（函数（a，b）{
var date1=new Date（new Date（）.toDateString（）++'+$（a）.children（'span.transactionTime'）.text（）.substr（0,5））
var date2=new Date（new Date（）.toDateString（）++''+$（b）.children（'span.transact-time'）.text（）.substr（0,5））
var结果=（日期1<日期2）？-1：（日期1>日期2）？1:0
返回结果；
});
ul.附加（li）；
}

---

谢谢，我仍然看到这段代码的一些奇怪结果，例如11:01将被置于11:06之上。@BenPaton或者你能用一个不起作用的案例更新这个例子并解释到底是什么错误吗？我从测试环境中复制了一些li，排序到这里，你可以看到，出于某种原因，它排序到11:41，然后是11:3911:41…这里有更多的地方它已经不同步了。也许这与ajax调用添加新李的方式有关？我颠倒了大于和小于符号。一切似乎都在按我的需要运转。谢谢你在这方面的帮助！：）

function sortList() {
    var ul = $('#ajaxInner');
    var li = ul.children("li");

    li.detach().sort(function(a, b) {
        var date1 = new Date (new Date().toDateString() + ' ' + $(a).children('span.transactTime').text().substr(0,5))
        var date2 = new Date (new Date().toDateString() + ' ' + $(b).children('span.transactTime').text().substr(0,5))
        var result = (date1 < date2) ? -1 : (date1 > date2) ? 1 : 0
        return result;
    });

    ul.append(li);
}