使用JS按日期/时间排序div

Question

我有一个脚本,它使用a data-date属性创建了很多div,并且时间格式为Tue Aug 16 2016 12:27:21 GMT+0100 (BST)

示例集可以是:

<div class="socialBox" data-date="Tue Aug 10 2016 12:30:21 GMT+0100 (BST)" data-type="twitter">
<div class="socialBox" data-date="Tue Aug 14 2016 12:10:21 GMT+0100 (BST)" data-type="facebook">
<div class="socialBox" data-date="Tue Aug 13 2016 15:27:21 GMT+0100 (BST)" data-type="youtube">
<div class="socialBox" data-date="Tue Aug 03 2016 18:27:21 GMT+0100 (BST)" data-type="instagram">

div被附加到来自各种不同函数的空白div,然后我运行JS来对div进行排序并将其再次附加到原始的空白div,但我似乎无法让它工作.

这是脚本

loadTwitter(twitter);
loadFacebook(facebook);
loadYoutube(youtube);
loadInstagram(instagram);

// DOESN'T WORK YET (THE BELOW)

var board = $("#social-board");
var boards = board.children('.socialBox');

boards.sort(function(a, b) {
    var an = $(a).data("date").getTime();
    var bn = $(b).data("date").getTime();

    if(an > bn) {
        return 1;
    }

    if(an < bn) {
        return -1;
    }

    return 0;
});

boards.detach().appendTo(board);

任何人都可以帮我吗？我不确定它是否附加到div元素或JS排序函数本身.

Answer 1

你可以这样做:

1. 将它们分离,然后使用.get获取真实数组而不是jQuery对象.

2. 对它们进行排序(可以简单得多)

3. 将该数组追加回去 #social-board

所以:

var boards = board.children('.socialBox').detach().get();
// --------------------------------------^^^^^^^^^^^^^^^

// A bit shorter :-)
boards.sort(function(a, b) {
  return new Date($(a).data("date")) - new Date($(b).data("date"));
});

board.append(boards); // <== switched this to append

实例:

// Wait a sec so we can see the old order...
setTimeout(function() {
  // Now sort them

  var board = $("#social-board");
  var boards = board.children('.socialBox').detach().get();

  boards.sort(function(a, b) {
    return new Date($(a).data("date")) - new Date($(b).data("date"));
  });

  board.append(boards);
}, 600);

<div id="social-board">
  <div class="socialBox" data-date="2016-08-10T11:30:21.000Z" data-type="twitter">2016-08-10T11:30:21.000Z</div>
  <div class="socialBox" data-date="2016-08-03T17:27:21.000Z" data-type="instagram">2016-08-03T17:27:21.000Z</div>
  <div class="socialBox" data-date="2016-08-14T11:10:21.000Z" data-type="facebook">2016-08-14T11:10:21.000Z</div>
  <div class="socialBox" data-date="2016-08-13T14:27:21.000Z" data-type="youtube">2016-08-13T14:27:21.000Z</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

注意:您不能依赖于Date您使用的字符串格式的JavaScript 对象解析日期.请注意我在代码段中使用的ISO格式.

旁注:除非您使用的功能,否则您data可能需要使用attr.data是不是只是一个访问data-*属性.它的数量越来越少.