Question

我有一个元素列表，其中的属性包含元素的创建日期和时间。

<ul>
   <li data-clock="6/9/2017, 6:53:56 PM"></li>
   <li data-clock="5/8/2017, 5:33:56 PM"></li>
   <li data-clock="6/7/2017, 4:13:56 PM"></li>
</ul>

如何点击<button>时从最旧的元素开始排序？

Answer 1

您需要选择所有li元素，使用.sort()函数对其进行排序，使用getAttribute('data-clock')获取值的自定义函数和(new Date(b.getAttribute('data-clock'))).getTime()来比较日期：

$ul.find('li.unsorted').sort(function(a, b) {
   return (new Date(a.getAttribute('data-clock'))).getTime() > (new Date(b.getAttribute('data-clock')).getTime()) ? -1 : 1;
})

<强>演示：

＆＃13;

var $ul = $('ul');
$("#sorter").click(function() {
  $ul.find('li.unsorted').sort(function(a, b) {
      return (new Date(a.getAttribute('data-clock'))).getTime() > (new Date(b.getAttribute('data-clock')).getTime()) ? -1 : 1;
    })
    .appendTo($ul);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="sorter">Sort</button>
<ul>
  <li class="unsorted" data-clock="6/9/2017, 6:53:56 PM">6/9/2017, 6:53:56 PM</li>
  <li class="unsorted" data-clock="5/8/2017, 5:33:56 PM">5/8/2017, 5:33:56 PM</li>
  <li class="unsorted" data-clock="6/7/2017, 4:13:56 PM">6/7/2017, 4:13:56 PM</li>
</ul>

＆＃13;

根据日期和时间对元素进行排序

1 个答案: