时间戳

首页 > 解决方案 > 在 Javascript 中订购日历事件列表并添加月份名称

javascript - 在 Javascript 中订购日历事件列表并添加月份名称

问题描述

我有一个 HTML 事件列表：

<ol id="my-list">
  <li data-start="01-Jan-2019">Event on 01-Jan-2019</li>
  <li data-start="25-Dec-2018">Event on 25-Dec-2018</li>
  <li data-start="14-Feb-2018">Event on 14-Feb-2018</li>
  <li data-start="14-Jul-2019">Event on 14-Jul-2019</li>
  <li data-start="31-Oct-2019">Event on 31-Oct-2019</li>
  <li data-start="13-Oct-2019">Event on 13-Oct-2019</li>
  <li data-start="26-Oct-2016">Event on 26-Oct-2016</li>
  <li data-start="02-Dec-2018">Event on 02-Dec-2018</li>
  <li data-start="21-Dec-2018">Event on 21-Dec-2018</li>
  <li data-start="18-Dec-2018">Event on 18-Dec-2018</li>
</ol>

如何将列表修改为：

<ol id="my-list">

    <span>October</span>

    <li data-start="01-Jan-2019">Event on 26-Oct-2016</li>

    <span>February</span>

    <li data-start="25-Dec-2018">Event on 14-Feb-2018</li>

    <span>December</span>

    <li data-start="14-Feb-2018">Event on 02-Dec-2018</li>
    <li data-start="14-Jul-2019">Event on 18-Dec-2018</li>
    <li data-start="31-Oct-2019">Event on 21-Dec-2018</li>
    <li data-start="13-Oct-2019">Event on 25-Dec-2018</li>

    <span>January</span>

    <li data-start="26-Oct-2016">Event on 01-Jan-2019</li>

    <span>July</span>

    <li data-start="02-Dec-2018">Event on 14-Jul-2019</li>

    <span>October</span>

    <li data-start="21-Dec-2018">Event on 13-Oct-2019</li>
    <li data-start="18-Dec-2018">Event on 31-Oct-2019</li>
</ol>

我也可以使用 jQuery。

更具体地说，我需要比较每个日期并查看月份是否已更改，如果是，请附加正确的月份名称。

首先，我订购了这些事件（来源http://jsfiddle.net/greguarr/2fr0vmhu/）：

var container = $("#my-list");
var items = $("#my-list li");

items.each(function() {
   // Convert the string in 'data-start' attribute to a more
   // standardized date format
   var BCDate = $(this).attr("data-start").split("-");
   var standardDate = BCDate[1]+" "+BCDate[0]+" "+BCDate[2];
   standardDate = new Date(standardDate).getTime();
   $(this).attr("data-start", standardDate);
   console.log($(this).attr("data-start", standardDate));

});

items.sort(function(a,b){
    a = parseFloat($(a).attr("data-start"));
    b = parseFloat($(b).attr("data-start"));
    return a<b ? -1 : a>b ? 1 : 0;
}).each(function(){
    container.append(this);
});

然后，我想将每个事件月份名称与其前一个事件月份名称进行比较，并仅在月份更改时插入月份名称。

标签： javascriptjqueryhtml

解决方案

将每个事件的月份与前一个事件进行比较，如果不同，请将其名称附加到列表项之前：

items.each(function(i) {
    var a1 = new Date($(this).data('start'));
    var b1 = new Date($(this).prev().data('start'));
    if (a1.getMonth() != b1.getMonth()) {
        $(this).before("<span>" + defineMonth(a1.getMonth()) + "</span>");
    }
});

其中 defineMonth 是一个检索月份名称的函数：

function defineMonth(evt) {
  var month = new Array();
  month[0] = "January";
  month[1] = "February";
  month[2] = "March";
  month[3] = "April";
  month[4] = "May";
  month[5] = "June";
  month[6] = "July";
  month[7] = "August";
  month[8] = "September";
  month[9] = "October";
  month[10] = "November";
  month[11] = "December";

  var n = month[evt];
  return n;
}

推荐阅读