Я столкнулся с проблемой при использовании функции заказа.
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>
)
}
@jabaa new Date('2023. 01. 28.')
приводит к значению Invalid Date
.
@EmielZuurbier Вам не нужно конвертировать в Date
. Вы можете сравнить строки. Смотрите мой ответ. Date
является излишним для этой проблемы.
@jabaa А, сегодня я кое-что узнал. Спасибо за это. Хотя я бы все же рекомендовал использовать универсальный формат, просто для нашего здравомыслия ;).
Заказ работает с вашими кодами, но во время тестирования я столкнулся с другой проблемой. Если я обновлю страницу или перейду к другой и вернусь к этой, порядок сбрасывается и больше не повторится. Поэтому я добавил прослушиватель событий с триггером прокрутки, и он с ним работает. Так как я очень-очень новичок, я не знаю, в чем может быть причина. Есть предположения?
Неважно. Я просто назвал это компонентом, как и предполагалось. Хах. :D
Вы можете использовать функцию 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>
Используйте формат даты ISO 8601, например
2023-01-28
, и используйте объект Date для сравнения дат.