How is it Possible to order <DIV>s by date?-CodePudding

i ran into a problem when using an ordering function.

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  data-date="2023. 01. 28."></div>

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

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

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

if i put numbers in the data-date it works fine(desc), but with date it doesn't. I get my date from a Sanity query in this format: "2023-01-28T12:10:00.000Z" which isn't even showing, so i use this: {new Date(post.publishedAt).toLocaleDateString()}

Can i convert my query output to be orderable by the sort function?

Example in Jsfiddle

CodePudding user response：

You can compare the strings. Remove the conversion to numbers:

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

$wrapper.find('.blogboxes').sort(function (a, b) {
    return b.dataset.date > a.dataset.date ? 1 : b.dataset.date < a.dataset.date ? -1 : 0;
})
.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  data-date="2023. 01. 28."></div>

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

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

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

Another approach is to convert the strings to a format that can be converted to numbers:

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  data-date="2023. 01. 28."></div>

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

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

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