时间戳

首页 > 解决方案 > 在jQuery中按数据事件日期对div进行排序

javascript - 在jQuery中按数据事件日期对div进行排序

问题描述

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

基本上，我有大量带有data-event-date标签的 div 和以格式呈现的日期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>

任何帮助，将不胜感激

标签： javascriptjqueryajax

解决方案

你真的应该使用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>

推荐阅读