Question

我需要一些帮助来对以下列表进行排序，我已经进行了一些研究，使用JavaScript尝试了以下操作，但是它不能用作我的日期格式 2020年1月20日

代码：

(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);
  });

})(jQuery);

<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="August 21 2020">August 21 2020</li>
  <li class="sort-item" data-event-date="April 25 2020">April 25 2020</li>
  <li class="sort-item" data-event-date="May 25 2020">May 25 2020</li>
  <li class="sort-item" data-event-date="September 25 2020">September 25 2020</li>
  <li class="sort-item" data-event-date="May 13 2020">May 13 2020</li>
  <li class="sort-item" data-event-date="June 1 2020">June 1 2020</li>
  <li class="sort-item" data-event-date="December 4 2020">December 4 2020</li>
</ul>

Answer 1

您正在尝试使用parseFloat，为什么不使用new Date()？
然后，您可以简单地比较日期，请参见下文

我删除了第一个items.each，因为我不了解它在此问题中的作用。

(function($) {
  var container = $(".sort-list");
  var items = $(".sort-item");

  items.sort(function(a, b) {
    let d1 = new Date($(a).data("event-date"));
    let d2 = new Date($(b).data("event-date"));
    return d1 > d2 ? -1 : d1 < d2 ? 1 : 0;
  }).each(function() {
    container.prepend(this);
  });
})(jQuery);

<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="August 21 2020">August 21 2020</li>
  <li class="sort-item" data-event-date="April 25 2020">April 25 2020</li>
  <li class="sort-item" data-event-date="May 25 2020">May 25 2020</li>
  <li class="sort-item" data-event-date="September 25 2020">September 25 2020</li>
  <li class="sort-item" data-event-date="May 13 2020">May 13 2020</li>
  <li class="sort-item" data-event-date="June 1 2020">June 1 2020</li>
  <li class="sort-item" data-event-date="December 4 2020">December 4 2020</li>
</ul>

但是，正如注释和另一个答案中所建议的那样，最好将字符串（例如“ 2020年8月21日”）转换为简化的日期格式（如“ 2020-08-21”），然后进行转换变成真实的Date，您将拥有更多的一致性

Answer 2

Date()可以解析跨平台的唯一格式是

2011-10-10（仅日期格式）
2011-10-10T14：48：00（日期时间形式）
2011-10-10T14：48：00.000 + 09：00（日期时间格式，以毫秒和时区为单位）

这来自MDN的Date()文档。其他可能正常工作的东西都可能在您的浏览器上工作，但其他浏览器却没有。（而且您的格式为“ 2020年8月21日”，看起来有些浏览器可能会尝试处理这种格式，但也许不是跨浏览器解决方案。）如果源格式为“ 2020年8月21日”，则可能需要添加一些逻辑来分析，例如，从“ August”到“ 08”（月名称填入月号），同样地填充少于10天的月数。每个MDN都不遵循上述三种跨浏览器支持的格式之一的解决方案。

除此之外，您的代码看起来像是在做正确的事-尽管在比较日期时您想使用parseInt()而不是parseFloat()； getTime()始终返回整数。 parseFloat()有点过分。

希望这会有所帮助！

如何按月日期和年份对<li>进行排序

2 个答案: