Sort Divs by Date/Time - Jquery

bstime
December 26, 2022
86 views
3 votes
3 Answers

I am trying to sort some dynamically created Divs by date/time using JS/jQuery. There are 2 different types of divs (.note and .activity) which are using data-datetime="" or just datetime="" so I am attempting to sort them by the content in elements with the class name .timeago.

setTimeout(function() {

  function sortDescending(a, b) {
    var date1 = $(a).find(".timeago").text();
        date1 = date1.split('/');
        date1 = new Date(date1[2], date1[1] - 1, date1[0]);
    var date2 = $(b).find(".timeago").text();
        date2 = date2.split('/');
        date2 = new Date(date2[2], date2[1] - 1, date2[0]);

    return date1 < date2 ? 1 : -1;
  };

  $('.notes .note').sort(sortDescending).appendTo('.notes');


}, 3000);

.note { margin-bottom:30px;}
.note .timeago {color:red; font-weight:bold;}
.activity .timeago {color:green; font-weight:bold;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="notes panel-group" id="accordion">

  <!------ Notes ------>

  <div class="note tab-content panel panel-default" data-toggle="collapse" href="#collapse0">
    <div class="row tab-content">
      <div class="col-sm-3 metadata tab-content panel-heading">
        <div class="postedon tab-content">
          <abbr class="timeago" data-datetime="2022-10-30T18:54:39Z" title="10/30/2022 11:54 AM">10/30/2022 11:54 AM</abbr>
        </div>
        <div class="createdby text-muted">Should Be 1</div>
      </div>
      <div class="col-sm-9 content panel-collapse collapse" id="collapse0">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      </div>
    </div>
  </div>

  <div class="note tab-content panel panel-default" data-toggle="collapse" href="#collapse1">
    <div class="row tab-content">
      <div class="col-sm-3 metadata tab-content panel-heading">
        <div class="postedon tab-content">
          <abbr class="timeago" data-datetime="2022-08-11T15:39:41Z" title="8/11/2022 8:39 AM">8/11/2022 8:39 AM</abbr>
        </div>
        <div class="createdby text-muted">Should Be 5</div>
      </div>
      <div class="col-sm-9 content panel-collapse collapse" id="collapse1">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      </div>
    </div>
  </div>

  <div class="note tab-content panel panel-default" data-toggle="collapse" href="#collapse2">
    <div class="row tab-content">
      <div class="col-sm-3 metadata tab-content panel-heading">
        <div class="postedon tab-content">
          <abbr class="timeago" data-datetime="2022-10-05T14:53:01Z" title="10/5/2022 7:53 AM">10/5/2022 7:53 AM</abbr>
        </div>
        <div class="createdby text-muted">Should Be 2</div>
      </div>
      <div class="col-sm-9 content panel-collapse collapse" id="collapse2">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      </div>
    </div>
  </div>

  <!------ End Notes ------>



  <!------ Activities ------>

  <div class="activity note panel panel-default" data-toggle="collapse" href="#collapse3">
    <div class="panel-heading tab-content">
      <div class="createdby tab-content">Should Be 6</div>
      <div class="postedon">
        <time class="timeago" datetime="2022-04-03T15:41:09-07:00">4/3/2022 3:41 PM</time>
      </div>
    </div>
    <div class="content panel-collapse collapse" id="collapse3">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>

  <div class="activity note panel panel-default" data-toggle="collapse" href="#collapse4">
    <div class="panel-heading tab-content">
      <div class="createdby tab-content">Should Be 3</div>
      <div class="postedon">
        <time class="timeago" datetime="2022-10-03T06:55:52-07:00">10/3/2022 6:55 AM</time>
      </div>
    </div>
    <div class="content panel-collapse collapse" id="collapse4">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>

  <div class="activity note panel panel-default" data-toggle="collapse" href="#collapse5">
    <div class="panel-heading tab-content">
      <div class="createdby tab-content">Should Be 4</div>
      <div class="postedon">
        <time class="timeago" datetime="2022-09-03T09:29:33-07:00">9/3/2022 9:29 AM</time>
      </div>
    </div>
    <div class="content panel-collapse collapse" id="collapse5">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>

  <!------ End Activities ------>


</div>

I have created a JS Fiddle for this – https://jsfiddle.net/bstime/oyec69g5/11/

Tags: javascript jquery

Answers

- Tom
- December 26, 2022 at 11:05 pm
- 0 votes
0
Your date constructor params were incorrect so the date being parsed failed. I split the last date part (the year + time eg: 2022 9:29 AM) with space and get the first item to only get the year.
```
setTimeout(function() {

  function sortDescending(a, b) {
    var date1 = $(a).find(".timeago").text();
    date1 = date1.split('/');
    date1 = new Date(date1[2].split(' ')[0], date1[0], date1[1]);

    var date2 = $(b).find(".timeago").text();
    date2 = date2.split('/');
    date2 = new Date(date2[2].split(' ')[0], date2[0], date2[1]);

    return date1 < date2 ? 1 : -1;
  };

  $('.notes .note').sort(sortDescending).appendTo('.notes');


}, 3000);
```
Login or Signup to reply.

You can do that…

function sortNotes()
  {
  let divParent = document.querySelector('#accordion');
    
  [...document.querySelectorAll('#accordion > div.note')]
  .sort( (a,b) =>
    {
    let aDate = new Date(a.querySelector('.timeago').textContent).getTime()
      , bDate = new Date(b.querySelector('.timeago').textContent).getTime();
    return bDate - aDate;
    }) 
  .forEach(note =>  divParent.appendChild(note) )
  }
  
sortNotes();

.note { margin-bottom:30px;}
.note .timeago {color:red; font-weight:bold;}
.activity .timeago {color:green; font-weight:bold;}

<div class="notes" id="accordion">
  <div class="note"  >
    <div class="row">
      <div class="">
        <div class="postedon">
          <abbr class="timeago" data-datetime="2022-10-30T18:54:39Z" title="10/30/2022 11:54 AM">10/30/2022 11:54 AM</abbr>
        </div>
        <div>Should Be 1</div>
      </div>
      <div class="col-sm-9 content  collapse" >
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      </div>
    </div>
  </div>
  <div class="note">
    <div class="row">
      <div class="">
        <div class="postedon">
          <abbr class="timeago" data-datetime="2022-08-11T15:39:41Z" title="8/11/2022 8:39 AM">8/11/2022 8:39 AM</abbr>
        </div>
        <div>Should Be 5</div>
      </div>
      <div class="col-sm-9 content  collapse" id="collapse1">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      </div>
    </div>
  </div>
  <div class="note"  >
    <div class="row">
      <div class="">
        <div class="postedon">
          <abbr class="timeago" data-datetime="2022-10-05T14:53:01Z" title="10/5/2022 7:53 AM">10/5/2022 7:53 AM</abbr>
        </div>
        <div>Should Be 2</div>
      </div>
      <div class="col-sm-9 content  collapse" id="collapse2">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      </div>
    </div>
  </div>
  <div class="activity note" >
    <div class="">
      <div class="createdby">Should Be 6</div>
      <div class="postedon">
        <time class="timeago" datetime="2022-04-03T15:41:09-07:00">4/3/2022 3:41 PM</time>
      </div>
    </div>
    <div class="content  collapse" >
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>
  <div class="activity note" >
    <div class="">
      <div class="createdby">Should Be 3</div>
      <div class="postedon">
        <time class="timeago" datetime="2022-10-03T06:55:52-07:00">10/3/2022 6:55 AM</time>
      </div>
    </div>
    <div class="content  collapse">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>
  <div class="activity note" >
    <div class="">
      <div class="createdby">Should Be 4</div>
      <div class="postedon">
        <time class="timeago" datetime="2022-09-03T09:29:33-07:00">9/3/2022 9:29 AM</time>
      </div>
    </div>
    <div class="content  collapse" >
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>
</div>

from PO comment :
that works when using on the fiddle but when I apply it to the site im getting: Uncaught TypeError: Cannot read properties of null (reading ‘textContent’)

in case of invalid date values…

function sortNotes()
  {
  let divParent = document.querySelector('#accordion')
    , allNotes  = [...document.querySelectorAll('#accordion > div.note')]
    ;
  allNotes.forEach( note =>
    {
    let refTimeago = note.querySelector('.timeago').dateTime 
                  || note.querySelector('.timeago').dataset.datetime
                   ;
    note._refDate = refTimeago ? new Date(refTimeago).getTime() : 0;
    if (isNaN(note._refDate) )
      note._refDate = 0;
    })
  allNotes
  .sort( (a,b) => b._refDate - a._refDate ) 
  .forEach( note => 
    {
    delete note._refDate;
    divParent.appendChild(note);
    })

sortNotes();
// or  :->  setTimeout( sortNotes, 3000);

There is already a good plain Javascript solution, but since you are using jQuery, here is a jQuery option. It also seems clunky to me to have to use the text of your page for the sorting, when you do have an attribute which is presumably there explicitly for this kind of programmatic manipulation – eg maybe in future the text will change format and won’t be parseable in JS.

function sortDescending(a, b) {
    // Find the element with the attributes we're after ...
    let $timeElementA = $('.timeago', a);
    let $timeElementB = $('.timeago', b);

    // ... and use whichever of the 2 attribute possibilities are there
    let timeA = $timeElementA.data('datetime')
        ? new Date($timeElementA.data('datetime'))
        : new Date($timeElementA.attr('datetime'));
    let timeB = $timeElementB.data('datetime')
        ? new Date($timeElementB.data('datetime'))
        : new Date($timeElementB.attr('datetime'));

    // Javascript sort should return a value >0, <0, or 0.  
    // Simply subtracting our 2 values works here.
    // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#description
    return timeB - timeA;
}

setTimeout(function() {
    $('.notes .note').sort(sortDescending).each(function(i, el) {
        $('.notes').append(el);
    });
}, 3000);

.note {
  margin-bottom: 30px;
}

.note .timeago {
  color: red;
  font-weight: bold;
}

.activity .timeago {
  color: green;
  font-weight: bold;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="notes panel-group" id="accordion">

<!------ Notes ------>

    <div class="note tab-content panel panel-default" data-toggle="collapse" href="#collapse0">
        <div class="row tab-content">
            <div class="col-sm-3 metadata tab-content panel-heading">
                <div class="postedon tab-content">
                    <abbr class="timeago" data-datetime="2022-10-30T18:54:39Z" title="10/30/2022 11:54 AM">10/30/2022 11:54 AM</abbr>
                </div>
                <div class="createdby text-muted">Should Be 1</div>
            </div>
            <div class="col-sm-9 content panel-collapse collapse" id="collapse0">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            </div>
        </div>
    </div>

    <div class="note tab-content panel panel-default" data-toggle="collapse" href="#collapse1">
        <div class="row tab-content">
            <div class="col-sm-3 metadata tab-content panel-heading">
                <div class="postedon tab-content">
                    <abbr class="timeago" data-datetime="2022-08-11T15:39:41Z" title="8/11/2022 8:39 AM">8/11/2022 8:39 AM</abbr>
                </div>
                <div class="createdby text-muted">Should Be 5</div>
            </div>
            <div class="col-sm-9 content panel-collapse collapse" id="collapse1">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            </div>
        </div>
    </div>

    <div class="note tab-content panel panel-default" data-toggle="collapse" href="#collapse2">
        <div class="row tab-content">
            <div class="col-sm-3 metadata tab-content panel-heading">
                <div class="postedon tab-content">
                    <abbr class="timeago" data-datetime="2022-10-05T14:53:01Z" title="10/5/2022 7:53 AM">10/5/2022 7:53 AM</abbr>
                </div>
                <div class="createdby text-muted">Should Be 2</div>
            </div>
            <div class="col-sm-9 content panel-collapse collapse" id="collapse2">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            </div>
        </div>
    </div>
    
<!------ End Notes ------>
    


<!------ Activities ------>

    <div class="activity note panel panel-default" data-toggle="collapse" href="#collapse3">
        <div class="panel-heading tab-content">
            <div class="createdby tab-content">Should Be 6</div>
            <div class="postedon">
                <time class="timeago" datetime="2022-04-03T15:41:09-07:00">4/3/2022 3:41 PM</time>
            </div>
        </div>
        <div class="content panel-collapse collapse" id="collapse3">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </div>
    </div>

    <div class="activity note panel panel-default" data-toggle="collapse" href="#collapse4">
        <div class="panel-heading tab-content">
            <div class="createdby tab-content">Should Be 3</div>
            <div class="postedon">
                <time class="timeago" datetime="2022-10-03T06:55:52-07:00">10/3/2022 6:55 AM</time>
            </div>
        </div>
        <div class="content panel-collapse collapse" id="collapse4">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </div>
    </div>

    <div class="activity note panel panel-default" data-toggle="collapse" href="#collapse5">
        <div class="panel-heading tab-content">
            <div class="createdby tab-content">Should Be 4</div>
            <div class="postedon">
                <time class="timeago" datetime="2022-09-03T09:29:33-07:00">9/3/2022 9:29 AM</time>
            </div>
        </div>
        <div class="content panel-collapse collapse" id="collapse5">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </div>
    </div>
    
<!------ End Activities ------>


</div>

Please signup or login to give your own answer.

Click here to cancel reply.

Sort Divs by Date/Time – Jquery

Answers