Как можно упорядочить <DIV> по дате?

Я столкнулся с проблемой при использовании функции заказа.

var $wrapper = $('#list');

$wrapper.find('.blogboxes').sort(function (a, b) {
    return +b.dataset.date - +a.dataset.date;
})
.appendTo( $wrapper );
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id = "list">

<div class = "blogboxes" data-date = "2023. 01. 28."></div>

<div class = "blogboxes" data-date = "2023. 01. 29."></div>

<div class = "blogboxes" data-date = "2023. 01. 30."></div>

<div class = "blogboxes" data-date = "2023. 01. 24."></div>
</div>

если я добавляю числа в дату данных, все работает нормально (по убыванию), но с датой это не так. Я получаю дату из запроса Sanity в следующем формате: "2023-01-28T12:10:00.000Z" который даже не отображается, поэтому я использую это: {новая дата (post.publishedAt).toLocaleDateString()}

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

Пример в Jsfiddle http://jsfiddle.net/5e4y9xbj/

Редактировать:

import React, {useState, useEffect} from "react";
import "./pagestyles.css"
import sanityClient from "../client.js"
import { NavLink } from "react-router-dom";
import $ from "jquery"

const orderBy = () => {
  var $wrapper = $('#list');

  $wrapper.find('.blogboxes').sort(function (a, b) {
      return +b.dataset.date.replaceAll(/\. ?/g, '') - +a.dataset.date.replaceAll(/\. ?/g, '');
  })
  .appendTo( $wrapper );

};

export default function Blog() {
                  const [postData, setPost] = useState(null);
                  useEffect(()=> 
                  {sanityClient.fetch('*[_type = = "post"]  {title, publishedAt, slug, extract, mainImage{asset->{_id, url},alt}}'

                                    ).then((data)=> setPost(data))
                                      .catch(console.error);
                  },[]);

window.addEventListener('scroll', orderBy);

  return (
    <main>
  <div className = "kontener">   
  <h1>Blog</h1>  
    <div id = "list" className = "flex-container">
          { postData && postData.map((post, index)=>(
          <div className = "blogboxes" key = {index} data-date = {new Date(post.publishedAt).toLocaleDateString()} >
            <div >
            <div className = "contentzoom" >
            <img className = "miniblog" src  = {post.mainImage.asset.url} 
                 alt  = {post.mainImage.alt}   />
              </div>
                  <NavLink className = "posztlink" to = {"/blog/" + post.slug.current} key  = {post.slug.current}>
                    {post.title}
                  </NavLink>
                  <div className = "extract">{post.extract}</div>
              </div>
          </div> ))}    
    </div>
  </div>
  </main>
)
}

Используйте формат даты ISO 8601, например 2023-01-28, и используйте объект Date для сравнения дат.

Emiel Zuurbier 02.02.2023 13:23

@jabaa new Date('2023. 01. 28.') приводит к значению Invalid Date.

Emiel Zuurbier 02.02.2023 13:26

@EmielZuurbier Вам не нужно конвертировать в Date. Вы можете сравнить строки. Смотрите мой ответ. Date является излишним для этой проблемы.

jabaa 02.02.2023 13:27

@jabaa А, сегодня я кое-что узнал. Спасибо за это. Хотя я бы все же рекомендовал использовать универсальный формат, просто для нашего здравомыслия ;).

Emiel Zuurbier 02.02.2023 13:31

Заказ работает с вашими кодами, но во время тестирования я столкнулся с другой проблемой. Если я обновлю страницу или перейду к другой и вернусь к этой, порядок сбрасывается и больше не повторится. Поэтому я добавил прослушиватель событий с триггером прокрутки, и он с ним работает. Так как я очень-очень новичок, я не знаю, в чем может быть причина. Есть предположения?

Péter Nagy 02.02.2023 15:48

Неважно. Я просто назвал это компонентом, как и предполагалось. Хах. :D

Péter Nagy 02.02.2023 18:24
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
6
73
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Вы можете использовать функцию Javascript Date для сравнения двух дат внутри функции сортировки по убыванию.

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

Итак, теперь ваш окончательный код будет:

var $wrapper = $('#list');

$wrapper.find('.blogboxes').sort(function (a, b) {
    var dateA = new Date(a.dataset.date);
    var dateB = new Date(b.dataset.date);
    return dateB.getTime() - dateA.getTime();
})
.appendTo( $wrapper );

Результат :

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

Вы можете сравнить строки. Убираем преобразование в числа:

var $wrapper = $('#list');

$wrapper.find('.blogboxes').sort(function (a, b) {
    return b.dataset.date.localeCompare(a.dataset.date);
})
.appendTo( $wrapper );
div[data-date] {
    font-family: sans-serif;
    background: teal;
    padding: 10px;
    font-weight: bold;
    color: #023636;
    text-shadow: 0 1px 0 #58BBBB;
    font-size: 20px;
    width: 100px;
    margin: 4px auto;
    text-align: center;
}

div[data-date]:before {
    content: attr(data-date);
}
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id = "list">

<div class = "blogboxes" data-date = "2023. 01. 28."></div>

<div class = "blogboxes" data-date = "2023. 01. 29."></div>

<div class = "blogboxes" data-date = "2023. 01. 30."></div>

<div class = "blogboxes" data-date = "2023. 01. 24."></div>
</div>

Другой подход заключается в преобразовании строк в формат, который можно преобразовать в числа:

var $wrapper = $('#list');

$wrapper.find('.blogboxes').sort(function (a, b) {
    return +b.dataset.date.replaceAll(/\. ?/g, '') - +a.dataset.date.replaceAll(/\. ?/g, '');
})
.appendTo( $wrapper );
div[data-date] {
    font-family: sans-serif;
    background: teal;
    padding: 10px;
    font-weight: bold;
    color: #023636;
    text-shadow: 0 1px 0 #58BBBB;
    font-size: 20px;
    width: 100px;
    margin: 4px auto;
    text-align: center;
}

div[data-date]:before {
    content: attr(data-date);
}
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id = "list">

<div class = "blogboxes" data-date = "2023. 01. 28."></div>

<div class = "blogboxes" data-date = "2023. 01. 29."></div>

<div class = "blogboxes" data-date = "2023. 01. 30."></div>

<div class = "blogboxes" data-date = "2023. 01. 24."></div>
</div>

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