在jQuery中按data-event-date对div进行排序

Question

我查看了与此相关的其他帖子，但要么我不知道如何实现他们的解决方案，要么看起来非常混乱。

基本上，我有大量带有data-event-date标签和以d/m/Y格式呈现的日期的div，我需要他们使用 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>