Как переставить дочерние элементы в атрибуте данных по дате и времени в jQuery?

Question

Я назначил каждому разделу свое собственное имя категории и хотел переставить его дочерние элементы div на основе атрибута data, отсортированного по дате и времени, опубликованному сверху, а затем по убыванию.

Я пытаюсь провести l oop через каждый из дочерних элементов своего родителя, но функция 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 в зависимости от того, какой из них самый последний.

Для ведения логики c DRY вы можете l oop на все контейнеры 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>