javascript - 如何在 jQuery 中按最近日期时间重新排列数据属性上的子 div？

Question

我已经为每个部分设置了自己的类别名称，并希望根据 data 属性重新排列其子 div 元素，该属性按在顶部发布的最近日期时间排序，然后降序到底部。

我尝试循环遍历其父元素的每个子元素，但函数 reArrangeVideosByRecentUploads() 不起作用。我调试了它，它会停在这行代码 $('.section' + ALPHA_CLASS_NAME + ' .thumb .video-thumbnail').each(function(i) { ，然后跳过该函数完全正确。代码中没有错误，所以我不确定为什么会出现这种情况。

var dates = [];
var _old;

var ALPHA_CLASS_NAME = ".alpha";
var BRAVO_CLASS_NAME = ".bravo";
var CHARLIE_CLASS_NAME = ".charlie";

function sortDates(a, b) {
  return new Date(b).getTime() - new Date(a).getTime();
}

function reArrangeVideosByRecentUploads() {
  if ($(this).parent('.section' + ALPHA_CLASS_NAME)) {
    $('.section' + ALPHA_CLASS_NAME + ' .thumb .video-thumbnail').each(function(i) {
      _old = $(this).parent();
      dates.push($(this).data('date'));

      sorted = dates.sort(sortDates);
      _new = $('<div/>').insertBefore(_old);

      $.each(sorted, function(i, val) {
        $('div[data-date="' + val + '"]').appendTo(_new);
      });

      _old.remove();
    });
  } else if ($(this).parent('.section' + BRAVO_CLASS_NAME)) {
    $('.section' + BRAVO_CLASS_NAME + ' .thumb .video-thumbnail').each(function(i) {
      _old = $(this).parent();
      dates.push($(this).data('date'));

      sorted = dates.sort(sortDates);
      _new = $('<div/>').insertBefore(_old);

      $.each(sorted, function(i, val) {
        $('div[data-date="' + val + '"]').appendTo(_new);
      });

      _old.remove();
    });
  } else if ($(this).parent('.section' + CHARLIE_CLASS_NAME)) {
    $('.section' + CHARLIE_CLASS_NAME + ' .thumb .video-thumbnail').each(function(i) {
      _old = $(this).parent();
      dates.push($(this).data('date'));

      sorted = dates.sort(sortDates);
      _new = $('<div/>').insertBefore(_old);

      $.each(sorted, function(i, val) {
        $('div[data-date="' + val + '"]').appendTo(_new);
      });

      _old.remove();
    });
  }
}

reArrangeVideosByRecentUploads();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="alpha">
  <h1>
    Alpha
  </h1>
  <div class="thumb">
    <div class="video-thumbnail" data-date="2012-04-02T13:04:48.000Z">A1 - 4/2012</div>
    <div class="video-thumbnail" data-date="2011-06-30T21:21:16.000Z">A2 - 6/2011</div>
    <div class="video-thumbnail" data-date="2013-03-05T18:35:47.000Z">A3 - 3/2013</div>
    <div class="video-thumbnail" data-date="2011-01-24T15:20:14.000Z">A4 - 1/2011</div>
    <div class="video-thumbnail" data-date="2016-05-12T17:25:43.000Z">A5 - 5/12/2016</div>
    <div class="video-thumbnail" data-date="2016-05-19T08:32:24.000Z">A6 - 5/19/2016</div>
    <div class="video-thumbnail" data-date="2020-02-03T22:05:25.000Z">A7 - 2/2020</div>
    <div class="video-thumbnail" data-date="2016-05-31T18:13:21.000Z">A8 - 5/31/2016</div>
    <div class="video-thumbnail" data-date="2014-01-24T17:00:02.000Z">A9 - 1/2014</div>
  </div>
</section>
<section class="bravo">
  <h1>
    Bravo
  </h1>
  <div class="thumb">
    <div class="video-thumbnail" data-date="2013-03-05T18:35:47.000Z">B1 - 3/2013</div>
    <div class="video-thumbnail" data-date="2011-01-24T15:20:14.000Z">B2 - 1/2011</div>
    <div class="video-thumbnail" data-date="2016-05-12T17:25:43.000Z">B3 - 5/12/2016</div>
    <div class="video-thumbnail" data-date="2016-05-19T08:32:24.000Z">B4 - 5/19/2016</div>
  </div>
</section>
<section class="charlie">
  <h1>
    Charlie
  </h1>
  <div class="thumb">
    <div class="video-thumbnail" data-date="2012-04-02T13:04:48.000Z">C1 - 4/2012</div>
    <div class="video-thumbnail" data-date="2011-06-30T21:21:16.000Z">C2 - 6/2011</div>
    <div class="video-thumbnail" data-date="2016-05-31T18:13:21.000Z">C3 - 5/31/2016</div>
    <div class="video-thumbnail" data-date="2014-01-24T17:00:02.000Z">C4 - 1/2014</div>
  </div>
</section>

JSfiddle

Answer 1

你把这个问题搞得太复杂了一点。要对元素进行排序，您可以使用 sort() 方法。为该方法提供一个函数，该函数接受两个参数，这两个参数是迭代中要相互比较的元素。将 data-date 值转换为 Date 对象并进行比较，返回 1 或 -1，具体取决于哪个最近的。

为了保持逻辑干燥，您可以循环遍历所有 section .thumb 容器并单独对它们进行排序。试试这个:

$('section .thumb').each(function() {
  $(this).find('div').sort(function(a, b) {
    return new Date($(a).data('date')) < new Date($(b).data('date')) ? 1 : -1;
  }).appendTo(this);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="alpha">
  <h1>Alpha</h1>
  <div class="thumb">
    <div class="video-thumbnail" data-date="2012-04-02T13:04:48.000Z">A1 - 4/2012</div>
    <div class="video-thumbnail" data-date="2011-06-30T21:21:16.000Z">A2 - 6/2011</div>
    <div class="video-thumbnail" data-date="2013-03-05T18:35:47.000Z">A3 - 3/2013</div>
    <div class="video-thumbnail" data-date="2011-01-24T15:20:14.000Z">A4 - 1/2011</div>
    <div class="video-thumbnail" data-date="2016-05-12T17:25:43.000Z">A5 - 5/12/2016</div>
    <div class="video-thumbnail" data-date="2016-05-19T08:32:24.000Z">A6 - 5/19/2016</div>
    <div class="video-thumbnail" data-date="2020-02-03T22:05:25.000Z">A7 - 2/2020</div>
    <div class="video-thumbnail" data-date="2016-05-31T18:13:21.000Z">A8 - 5/31/2016</div>
    <div class="video-thumbnail" data-date="2014-01-24T17:00:02.000Z">A9 - 1/2014</div>
  </div>
</section>
<section class="bravo">
  <h1>Bravo</h1>
  <div class="thumb">
    <div class="video-thumbnail" data-date="2013-03-05T18:35:47.000Z">B1 - 3/2013</div>
    <div class="video-thumbnail" data-date="2011-01-24T15:20:14.000Z">B2 - 1/2011</div>
    <div class="video-thumbnail" data-date="2016-05-12T17:25:43.000Z">B3 - 5/12/2016</div>
    <div class="video-thumbnail" data-date="2016-05-19T08:32:24.000Z">B4 - 5/19/2016</div>
  </div>
</section>
<section class="charlie">
  <h1>Charlie</h1>
  <div class="thumb">
    <div class="video-thumbnail" data-date="2012-04-02T13:04:48.000Z">C1 - 4/2012</div>
    <div class="video-thumbnail" data-date="2011-06-30T21:21:16.000Z">C2 - 6/2011</div>
    <div class="video-thumbnail" data-date="2016-05-31T18:13:21.000Z">C3 - 5/31/2016</div>
    <div class="video-thumbnail" data-date="2014-01-24T17:00:02.000Z">C4 - 1/2014</div>
  </div>
</section>