Javascript сортировать по ближайшей дате начала времени, чтобы представить дальше и другой атрибут

Question

Я должен сделать сортировку по дате начала времени со ссылкой на текущую дату и время с несколькими атрибутами. Например, у меня есть этот список:

<ul>
    <li data-startDate="09-04-2019 15:00" data-inplay=false>Name1</li>
    <li data-startDate="09-04-2019 15:30" data-inplay=false>Name2</li>
    <li data-startDate="09-04-2019 15:20" data-inplay=false>Name3</li>
    <li data-startDate="09-04-2019 16:00" data-inplay=false>Name4</li>
    <li data-startDate="09-04-2019 15:00" data-inplay=true> Name5</li>
    <li data-startDate="09-04-2019 15:10" data-inplay=false>Name6</li>
    <li data-startDate="09-04-2019 15:05" data-inplay=true> Name7</li>
    <li data-startDate="08-04-2019 12:05" data-inplay=false>Name8</li>
</ul>

и текущее время даты 09-04-2019 15:15, желаемый результат должен быть:

<!--
  Let currentDate = 09-04-2019 15:15
  Sort priority:
    1. inplay is true
    2. startDate is greater than currentDate
    3. startDate is lesser than currentDate
-->
<ul>
  <!-- inplay == true -->
  <li data-startDate="09-04-2019 15:05" data-inplay=true>Name7</li>
  <li data-startDate="09-04-2019 15:00" data-inplay=true>Name5</li>

  <!-- startDate > currentDate -->
  <li data-startDate="09-04-2019 15:20" data-inplay=false>Name3</li>
  <li data-startDate="09-04-2019 15:30" data-inplay=false>Name2</li>
  <li data-startDate="09-04-2019 16:00" data-inplay=false>Name4</li>

  <!-- startDate < currentDate -->
  <li data-startDate="09-04-2019 15:10" data-inplay=false>Name6</li>
  <li data-startDate="09-04-2019 15:00" data-inplay=false>Name1</li>
  <li data-startDate="08-04-2019 12:05" data-inplay=false>Name8</li>
</ul>

Я пробовал это, но не включал параметр inplay, а также порядок не совсем правильный

var list = $("ul > li");
var target = new Date().getTime();
var sortByStartTime = function (a, b) {
    var ret = 0;
    var startDateA = $(a).data("startdate");
    var startDateB = $(b).data("startdate");
    var dateA = startDateA.split(" ")[0].split("-");
    var timeA = startDateA.split(" ")[1].split(":");
    var dateB = startDateB.split(" ")[0].split("-");
    var timeB = startDateB.split(" ")[1].split(":");
    startDateA = new Date(dateA[2], dateA[1] - 1, dateA[0], timeA[0], timeA[1]);
    startDateB = new Date(dateB[2], dateB[1] - 1, dateB[0], timeB[0], timeB[1]);
    var dA = Math.abs(startDateA.getTime() - target);
    var dB = Math.abs(startDateB.getTime() - target);
    if (dA < dB) {
        ret = -1;
    } else if (dA > dB) {
        ret = 1;
    }  else {
        ret = 0;
    }
    return ret;
};

list.sort(sortByStartTime);

for (var i = 0; i < list.length; i = i + 1) {
    list[i].parentNode.appendChild(list[i]);
}

По сути, список должен быть упорядочен по ближайшему времени начала (относительно текущей даты) до самого дальнего, но если есть какие-то признаки, они должны быть вверху списка, упорядоченные по ближайшему времени начала (относительно текущей даты). время) до далеких. Надеюсь, я объясню достаточно ясно. Спасибо за любую помощь, спасибо.

Answer 1

Логика сортировки:

1. Сортировка по входящим данным true или false, с использованием числа для упрощения логики сортировки (сортировка по убыванию)
2. Если различия противоположны сторона нуля сначала сохраняет положительное значение, а отрицательное значение позже (сортировка по убыванию)
3. Если разница с текущим временем для обеих дат на одной стороне от 0, сортировать по абсолютному значения (сортировка в порядке возрастания)

var list = Array.from(document.querySelectorAll("ul > li"));
var target = new Date('09-04-2019 15:15');
var boolValue = { true: 1, false: 0 };
var sortByStartTime = function (a, b) {
    var diffA = new Date(a.dataset.startdate) - target;
    var diffB = new Date(b.dataset.startdate) - target;
    var inplayA = boolValue[a.dataset.inplay];
    var inplayB = boolValue[b.dataset.inplay];
    return inplayB - inplayA || (
        diffA < 0 === diffB < 0 ? Math.abs(diffA) - Math.abs(diffB) : diffB - diffA
    );
};

list.sort(sortByStartTime);

for (var i = 0; i < list.length; i = i + 1) {
    list[i].parentNode.appendChild(list[i]);
}

<ul>
  <li data-startDate="09-04-2019 15:00" data-inplay=false>Name1</li>
  <li data-startDate="09-04-2019 15:30" data-inplay=false>Name2</li>
  <li data-startDate="09-04-2019 15:20" data-inplay=false>Name3</li>
  <li data-startDate="09-04-2019 16:00" data-inplay=false>Name4</li>
  <li data-startDate="09-04-2019 15:00" data-inplay=true> Name5</li>
  <li data-startDate="09-04-2019 15:10" data-inplay=false>Name6</li>
  <li data-startDate="09-04-2019 15:05" data-inplay=true> Name7</li>
  <li data-startDate="08-04-2019 12:05" data-inplay=false>Name8</li>
</ul>

PS: замените new Date('09-04-2019 15:15'); на new Date();, чтобы получить то, что вы хотели. Я жестко запрограммировал дату, чтобы показать, что результаты соответствуют вашим требованиям.

Answer 2

Вы можете получить lis элементы, такие как массив, используя оператор распространения [...document.querySelectorAll('li')]

Затем создайте lisSorted, который будет содержать массив элементов, отсортированных поатрибут элемента data-startDate и логический атрибут data-inplay

код:

const ul = document.querySelector('ul');
const lis = [...ul.querySelectorAll('li')];
const lisSorted = lis
  .sort((a, b) => {
    const x = a.getAttribute('data-inplay');
    const y = b.getAttribute('data-inplay');
    return ((x === y) ? 0 : x ? -1 : 1) || new Date(b.getAttribute('data-startDate')) - new Date(a.getAttribute('data-startDate'));
  });

ul.append(...lisSorted);

<ul>
  <li data-startDate="09-04-2019 15:00" data-inplay=false>Name1</li>
  <li data-startDate="09-04-2019 15:30" data-inplay=false>Name2</li>
  <li data-startDate="09-04-2019 15:20" data-inplay=false>Name3</li>
  <li data-startDate="09-04-2019 16:00" data-inplay=false>Name4</li>
  <li data-startDate="09-04-2019 15:00" data-inplay=true> Name5</li>
  <li data-startDate="09-04-2019 15:10" data-inplay=false>Name6</li>
  <li data-startDate="09-04-2019 15:05" data-inplay=true> Name7</li>
  <li data-startDate="08-04-2019 12:05" data-inplay=false>Name8</li>
</ul>