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>

我尝试了此操作，但不包含游戏内参数，而且排序也不正确

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

您可以使用spread operator 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>

Answer 2

排序逻辑：

使用数字简化排序逻辑（按降序排序），按数据显示正确还是错误进行排序
如果差异相反零边先保留正值，然后保留负值（按降序排列）
如果与当前时间相差对于两个日期都在0的同一侧，请按其绝对值排序值（按升序排列）

<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>

new Date('09-04-2019 15:15');

PS：将new Date();替换为{{1}}，以获得所需的内容。我对日期进行了硬编码，以表明结果符合您的要求。

javascript按最接近的开始日期时间（最远的时间）和另一个属性

2 个答案: