使用日期时间属性对 LI 元素进行排序

Question

li 标签有以下 sn-p：

tl = '<li>';
    tl+= '<time class="cbp_tmtime" datetime="2013-04-10 18:30"><span>04/10/13</span> <span>18:30</span></time>';
    tl+= '<div class="cbp_tmlabel">';
    tl+= '<p>TL Content Goes here</p>';
    tl+= '</div>';
    tl+= '</li>';

如您所见，有一个time 标签。是否可以使用 jQuery 对基于 w.r.t datetime 属性的<ul> 进行排序？

Answer 1

没错。

你可以为他们写一个排序：How to define custom sort function in javascript?

这是一个小提琴：http://jsfiddle.net/58eyg7ds/1/ 和用于为 jQuery 创建自定义排序的代码：

$.fn.sortMyData = function() {
  var elements = $(this).find('> *');

  // Create an array for the content
  var arr = [];

  for (var i = 0; i < elements.length; i++) {
    arr.push(elements.eq(i));
  }

  arr.sort(function(a, b) {
      var dateA = new Date(a.attr('datetime').replace(/([0-9]{4}\-[0-9]{1,2}\-[0-9]{1,2}) /, '$1T'))
    var dateB = new Date(b.attr('datetime').replace(/([0-9]{4}\-[0-9]{1,2}\-[0-9]{1,2}) /, '$1T'))

    if (dateA < dateB) {
      return -1;
    }

    if (dateA > dateB) {
      return 1;
    }

    return 0;
  });

  for (i = 0; i < arr.length; i++) {
    $(this).append(arr[i]);
  }
}

$('ul').sortMyData();

Answer 2

改编this question的代码，你应该可以做这样的事情。

function parseDate(input) {
  var parts = input.match(/(\d+)/g);
  // new Date(year, month [, date [, hours[, minutes[, seconds[, ms]]]]])
  return new Date(parts[0], parts[1]-1, parts[2], parts[3], parts[4], parts[5]); //     months are 0-based
}

var elems = $.makeArray($(".dateDiv"));
elems.sort(function(a, b) {
    // Ascending order
    return parseDate( $(a).attr("datetime") ) > parseDate( $(b).attr("datetime") );
});
$("#D").html(elems);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="D">
    <div class="dateDiv" datetime="2012-04-15 10:25:45">2012-04-15 10:25:45</div>
    <div class="dateDiv" datetime="2012-04-10 19:41:08">2012-04-10 19:41:08</div>
    <div class="dateDiv" datetime="2012-04-20 07:00:10">2012-04-20 07:00:10</div>
    <div class="dateDiv" datetime="2012-04-12 16:45:50">2012-04-12 16:45:50</div>
</div>