Сортировать деления по дате-события-события в jQuery

Question

Я просматривал другие посты, связанные с этим, но либо не мог понять, как реализовать их решение, либо это выглядело очень грязно.

В основном у меня есть куча div с data-event-dateтег и дата отображаются в формате d/m/Y, и мне нужно, чтобы они вводили дату по возрастанию с помощью JavaScript.

Вот страница со списком элементов div https://sheffieldskillsacademy.com/locations/sheffield/jobs

<script>
(function($){
    var container = $(".sort-list");
    var items = $(".sort-item");

    items.each(function() {
       // Convert the string in 'data-event-date' attribute to a more
       // standardized date format
       var BCDate = $(this).attr("data-event-date").split("/");
       var standardDate = BCDate[1]+" "+BCDate[0]+" "+BCDate[2];
       standardDate = new Date(standardDate).getTime();
       $(this).attr("data-event-date", standardDate);

    });


    items.sort(function(a,b){
        a = parseFloat($(a).attr("data-event-date"));
        b = parseFloat($(b).attr("data-event-date"));
        return a>b ? -1 : a<b ? 1 : 0;
    }).each(function(){
        container.prepend(this);
    });

});
</script>

Любойбудет признательна за помощь

Answer 1

Вы действительно должны использовать формат new Date(year, monthIndex, day) для создания дат. Строка с разделителями-пробелами является нестандартным форматом даты ISO.

Затем в функции сортировки вы можете воспользоваться преимуществом оператора -, приводящего строки к числам автоматически

var container = $(".sort-list");
var items = $(".sort-item");

items.attr('data-event-date', function(i, currVal) {
  const dParts = currVal.split('/');
  const date = new Date(dParts[2], dParts[1] - 1, dParts[0]);
                             // ^^^ individal arguments
  return date.getTime();
});

$('button').click(function() {
  items.sort(function(a, b) {
    return $(a).data('event-date') - $(b).data('event-date');
  });
  container.html(items);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="sort-list">
  <li class="sort-item" data-event-date="27/09/2019">27/09/2019</li>
  <li class="sort-item" data-event-date="31/12/2020">31/12/2020</li>
  <li class="sort-item" data-event-date="01/01/2016">01/01/2016</li>
</ul>

<button>Sort ascending</button>