我必须按开始日期时间进行排序,并引用具有多个属性的当前日期时间。例如,我有这个列表:
<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]);
}
基本上,列表应按最近的开始日期时间(相对于当前日期时间(到最远排序,但如果有一些内涵,它们应该位于列表顶部,按最近的开始日期时间(相对于当前日期时间(到最远排序。我希望我解释得足够清楚。任何帮助不胜感激,谢谢。
您可以使用扩展运算符[...document.querySelectorAll('li')]
获取lis
元素,例如
然后创建将包含按元素属性data-startDate
和布尔属性排序的元素数组的lisSorted
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>
排序逻辑:
- 按
- 数据重播真或假排序,使用数字简化排序逻辑(按降序排序(
- 如果差异相反零的一侧先保持正值,后保持负值(按降序排序(
- 如果与当前时间相差对于两个日期都在 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();
以获得您想要的。我硬编码日期以显示结果符合您的要求。