Home » Jquery » javascript – How to rearrange child divs on data attribute by recent date time in jQuery?-Exceptionshub

javascript – How to rearrange child divs on data attribute by recent date time in jQuery?-Exceptionshub

Posted by: admin February 24, 2020 Leave a comment

Questions:

I have set each section with its own category name and wanted to rearrange its child div elements based on the data attribute sorted by recent date time published at the top then descending to the bottom.

I’m trying to loop through each of the child elements of its parent but the function reArrangeVideosByRecentUploads() isn’t working. I debugged it and it would stop at this line of code $('.section' + ALPHA_CLASS_NAME + ' .thumb .video-thumbnail').each(function(i) { and then skip the function entirely. There’s no error in the code, so I’m not sure why this is the case.

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

How to&Answer:

You’re overcomplicating this a little. To sort elements you can use the sort() method. Provide this method a function which accepts two arguments which are the elements in the iteration to compare to each other. Convert the data-date values to Date objects and compare them, returning 1 or -1 depending on which is the most recent.

To keep the logic DRY you can loop over all the section .thumb containers and sort them individually. Try this:

$('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>