javascript - 通过比较 jquery 中的数据属性来交换元素

Question

我有多个带有 data-timestamp 属性的 div 元素

我想做的是按 data-timestamp(从新到旧)对这些 div 进行排序。我决定遍历元素并交换它们的位置。如果元素的下一个兄弟元素的 data-timestamp 比当前元素更新，则下一个兄弟元素将插入到当前元素之前。

$.each($('.sorted-chat-item'), function( i, value ) {
        //current element's timestamp
        var date = new Date($(value).attr('data-timestamp'));
        //all elements
        var list = $('.sorted-chat-item');

        for(var j = i+1; j < list.length; j++){
            //next element's timestamp
            var nextDate = new Date($(list[j]).attr('data-timestamp'));
            if(date < nextDate){
                $(list[j]).insertBefore( $(list[i]) );
            }
        }
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='sorted-chat-item' data-timestamp="2017-09-01 18:09:22">2017-09-01 18:09:22</div>
<div class='sorted-chat-item' data-timestamp="2017-09-01 18:01:27">2017-09-01 18:01:27</div>
<div class='sorted-chat-item' data-timestamp="2017-09-01 18:31:36">2017-09-01 18:31:36</div>

但排序不正确。知道吗，我做错了什么？

Answer 1

我没有测试过这个，你可能应该使用父级的 id 而不是 parent()，但我想这样的事情会起作用

function sortByCustomDate(a, b){
    var aDate = new Date($(a).attr('data-timestamp'));
    var bDate = new Date($(b).attr('data-timestamp'));
    return ((aDate < bDate) ? -1 : ((aDate > bDate) ? 1 : 0));
}


var $parent = $('.sorted-chat-item').parent();
var $allElements = $('.sorted-chat-item');
$allElements.sort(sortByCustomDate);
$parent.empty().append($allElements);