Question

我的html中有很多假期：

<ul class="sort-list">
   <li class="sort-item" data-event-date="14/02/2016">Valentine's Day</li>
   <li class="sort-item" data-event-date="25/12/2016">Christmas</li>
   <li class="sort-item" data-event-date="25/12/2016">New Years</li>
   <li class="sort-item" data-event-date="01/01/2016">New Year's Day</li>
   <li class="sort-item" data-event-date="31/10/2016">Halloween</li>
</ul>

并设法按照正确的顺序使用jquery：

按日期对它们进行分组

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

我需要实现的是，如果它们具有相同的数据属性值，则在其上方添加组的每个日期，例如：

2016年1月1日
新年元旦的 14/02/2016
情人节
的 31/12/2016
万圣节
的 31/12/2016
新的一年圣诞

请在此处查看我的jsfiddle：http://jsfiddle.net/qq8mhw97/1/

我真的很感谢你对这项任务的帮助。

Answer 1

这是一种方式：

<Prefer32Bit>false</Prefer32Bit>

(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);
    if ($(this).next().text() == $(this).attr("data-event-date")) $(this).next().remove()
    container.prepend('<li>' + $(this).attr("data-event-date") + '</li')

  });
  $('li:not(".sort-item")').each(function() {
    var d = new Date(parseInt($(this).text(), 10));
    $(this).text(d.getDate() + '/' + (d.getMonth() + 1) + '/' + d.getFullYear())
  })
})(jQuery);

从数据属性值向组添加标题

1 个答案: