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

您可以通过以下方式执行此操作：

预先分离它们然后使用.get来获取真实数组而不是jQuery对象。
对它们进行排序（可以简单得多）
将该数组追加回#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

实例：

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

附注：除非您使用data的功能，否则您可能需要使用attr。 data 不只是data-*属性的访问者。它的内容越来越少。

Answer 2

你的想法是正确的，但你的逻辑在你的排序功能中略有偏差。这是我用来排序日期的代码：

var reverse = false; // ascending/descending flag
var board = $("#social-board");
var boards = board.children('.socialBox');
var orderedBoards = boards.slice().sort(function (elem1, elem2) {
  var value1 = new Date($(elem1).data("date")).getTime(),
      value2 = new Date($(elem2).data("date")).getTime();
  if (reverse) {
    // descending
    return -(value1 > value2) || +(value1 < value2) || (isNaN(value1)) - (isNaN(value2));
  }
  // ascending
  return +(value1 > value2) || -(value1 < value2) || (isNaN(value1)) - (isNaN(value2));
});
board.empty().append(orderedBoards);

Answer 3

我有一个解决方案：

HTML：

<ul class="sort-list">
    <li class="sort-item" data-event-date="2018-06-30 22:00">3</li>
    <li class="sort-item" data-event-date="2018-06-29 21:00">2</li>
    <li class="sort-item" data-event-date="2018-06-27 22:00">1</li>
    <li class="sort-item" data-event-date="2018-07-01 22:00">4</li>
    <li class="sort-item" data-event-date="2018-07-02 22:00">5</li>

</ul>

<button onclick="chat_order()">
test
</button>

JS：

function chat_order() {
    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");
       /*console.log(BCDate);
       var standardDate = BCDate[1]+" "+BCDate[0]+" "+BCDate[2];*/
       var standartDate = new Date(BCDate).getTime();
       $(this).attr("data-event-date", standartDate);
                console.log(standartDate);
    });


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

}

JSFIDDLE：http://jsfiddle.net/2fr0vmhu/294/

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

3 个答案: