javascript - 使用 JS 按日期/时间对 div 进行排序

Question

我有一个脚本，它使用 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>

---

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

---

旁注:除非您使用 data 的功能, 你可能想使用 attr反而。 data 不仅仅是 data-* 属性的访问器。它既多又少。