Сортировать дивы по дате/времени с JS

Question

У меня есть скрипт, который создает много дивы с атрибутом data-date и имеет формат времени Tue Aug 16 2016 12:27:21 GMT+0100 (BST)

может быть Пример набора:

<div class="socialBox" data-date="Tue Aug 10 2016 12:30:21 GMT+0100 (BST)" data-type="twitter"> 
<div class="socialBox" data-date="Tue Aug 14 2016 12:10:21 GMT+0100 (BST)" data-type="facebook"> 
<div class="socialBox" data-date="Tue Aug 13 2016 15:27:21 GMT+0100 (BST)" data-type="youtube"> 
<div class="socialBox" data-date="Tue Aug 03 2016 18:27:21 GMT+0100 (BST)" data-type="instagram"> 

Дивы добавляются в пустой div из множества различных функций, а затем я запускаю JS для сортировки div и добавляет его в исходный пустой div, но я не могу заставить его работать.

Вот сценарий

loadTwitter(twitter); 
loadFacebook(facebook); 
loadYoutube(youtube); 
loadInstagram(instagram); 

// DOESN'T WORK YET (THE BELOW) 

var board = $("#social-board"); 
var boards = board.children('.socialBox'); 

boards.sort(function(a, b) { 
    var an = $(a).data("date").getTime(); 
    var bn = $(b).data("date").getTime(); 

    if(an > bn) { 
     return 1; 
    } 

    if(an < bn) { 
     return -1; 
    } 

    return 0; 
}); 

boards.detach().appendTo(board); 

Может кто-нибудь помочь мне? Я не уверен, что его добавление к элементу div или к функции сортировки JS.

Answer 1

Вы можете сделать это:

1. Отсоединение их фронт, а затем с помощью .get, чтобы получить реальный массив вместо объекта JQuery.

2. Сортировка их (что может быть намного проще)

3. Добавляя этот массив обратно #social-board

так:

var boards = board.children('.socialBox').detach().get(); 
// --------------------------------------^^^^^^^^^^^^^^^ 

// A bit shorter :-) 
boards.sort(function(a, b) { 
    return new Date($(a).data("date")) - new Date($(b).data("date")); 
}); 

board.append(boards); // <== switched this to append 

Живой пример:

// Wait a sec so we can see the old order... 
 
setTimeout(function() { 
 
    // Now sort them 
 

 
    var board = $("#social-board"); 
 
    var boards = board.children('.socialBox').detach().get(); 
 

 
    boards.sort(function(a, b) { 
 
    return new Date($(a).data("date")) - new Date($(b).data("date")); 
 
    }); 
 

 
    board.append(boards); 
 
}, 600);

<div id="social-board"> 
 
    <div class="socialBox" data-date="2016-08-10T11:30:21.000Z" data-type="twitter">2016-08-10T11:30:21.000Z</div> 
 
    <div class="socialBox" data-date="2016-08-03T17:27:21.000Z" data-type="instagram">2016-08-03T17:27:21.000Z</div> 
 
    <div class="socialBox" data-date="2016-08-14T11:10:21.000Z" data-type="facebook">2016-08-14T11:10:21.000Z</div> 
 
    <div class="socialBox" data-date="2016-08-13T14:27:21.000Z" data-type="youtube">2016-08-13T14:27:21.000Z</div> 
 
</div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

---

Примечание: Вы не можете полагаться на JavaScript Date объект разборе даты в формате строки, которые вы использовали. Обратите внимание на формат ISO, который я использовал в этом фрагменте.

---

Side Примечание: Если вы не используете особенности data, вы можете использовать вместо attr. data является не только аксессуар для data-* атрибутов. Это и больше, и меньше.

Answer 2

Ваша идея правильная, но ваша логика слегка отключена в вашей функции сортировки. Это код, который я использую для сортировки дат:

var reverse = false; // ascending/descending flag 
var board = $("#social-board"); 
var boards = board.children('.socialBox'); 
var orderedBoards = boards.slice().sort(function (elem1, elem2) { 
    var value1 = new Date($(elem1).data("date")).getTime(), 
     value2 = new Date($(elem2).data("date")).getTime(); 
    if (reverse) { 
    // descending 
    return -(value1 > value2) || +(value1 < value2) || (isNaN(value1)) - (isNaN(value2)); 
    } 
    // ascending 
    return +(value1 > value2) || -(value1 < value2) || (isNaN(value1)) - (isNaN(value2)); 
}); 
board.empty().append(orderedBoards);