Сортировка Div по дате/времени

Я пытаюсь отсортировать некоторые динамически созданные Div по дате/времени, используя JS/jQuery. Существует 2 разных типа div (.note и .activity), которые используют data-datetime="" или просто datetime="", поэтому я пытаюсь отсортировать их по содержимому в элементах с именем класса .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>

Для этого я создал JS Fiddle - https://jsfiddle.net/bstime/oyec69g5/11/

Хорошо, это сделано, надеюсь, это поможет

— 26.12.2022 23:04

@bstime Смотрите ответ, пожалуйста, установите как ответ, если все в порядке :)

— 26.12.2022 23:07

javascript jquery

26.12.2022 22:31

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Ваши параметры конструктора даты были неверными, поэтому дата не удалась. Я разделяю последнюю часть даты (год + время, например: 2022, 9:29) пробелом и получаю первый элемент, чтобы получить только год.

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

это работает при использовании на скрипке, но когда я применяю его к сайту, я получаю: Uncaught TypeError: Невозможно прочитать свойства неопределенного (чтение «разделить»)

— 26.12.2022 23:35

@bstime, тогда код на скрипке отличается от кода на веб-сайте - можете ли вы обновить свой вопрос с помощью кода

— 26.12.2022 23:43

26.12.2022 23:05

Ответ принят как подходящий

Вы можете сделать это...

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>

из комментария :
это работает при использовании на скрипке, но когда я применяю его к сайту, я получаю: Uncaught TypeError: невозможно прочитать свойства null (чтение «textContent»)

в случае недопустимых значений даты...

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

это работает при использовании на скрипке, но когда я применяю его к сайту, я получаю: Uncaught TypeError: невозможно прочитать свойства null (чтение «textContent»)

— 27.12.2022 00:15

@bstime это означает, что HTML-код, который вы здесь представили, не соответствует множеству возможных случаев, присутствующих на вашем сайте. Должны быть заметки без class = "timeago" или с пустым текстом...

— 27.12.2022 01:02

@bstime Я обновил свой ответ.... (недопустимые даты переводятся в конец списка)

— 27.12.2022 01:38

Да, это то, что происходило, я использовал $('time').addClass('timeago'); добавить .timeago к действиям, которые в некоторых случаях не добавлялись вовремя для сортировки. ТЮ

— 28.12.2022 18:48

26.12.2022 23:34

Уже есть хорошее простое решение для Javascript, но, поскольку вы используете jQuery, вот вариант jQuery. Мне также кажется неудобным использовать текст вашей страницы для сортировки, когда у вас есть атрибут, который предположительно существует явно для такого рода программных манипуляций - например, возможно, в будущем текст изменит формат и не будет быть разборчивым в 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>

27.12.2022 00:22

Другие вопросы по теме

Показать подменю с javascript

Добавьте атрибут aria-labelledby в JQuery Datatable Pagination

Jquery Ajax не передает данные в метод действия

Присоединение метода PUT к скрипту в файле блейда

Скрыть поле, если оно не содержит изображения

Мой раскрывающийся список начальной загрузки не работает, и я перепробовал все, чтобы заставить его работать в соответствии с моими знаниями

Как я могу предотвратить «Невозможно повторно объявить переменную блочной области» в этой ситуации?

Получите значения из динамического раскрывающегося списка и отобразите их в динамическом текстовом поле

Вукоммерция | Отключить кнопку «Добавить в корзину» для одного продукта, предназначенного для определенного идентификатора продукта

Как преобразовать es6 в es5, используя среду babel, не являющуюся узлом js

Сортировка Div по дате/времени

Ответы 3

Другие вопросы по теме

Похожие вопросы