CODEWITHSUNDEEP
jquery
benhowdle89
benhowdle89

Reputation: 37464

jQuery order by date in data attribute

If i have this markup:

<p data-date="Fri, 26 Aug 2011 20:58:39 GMT">item 1</p>
<p data-date="Fri, 24 Aug 2011 20:58:39 GMT">item 1</p>
<p data-date="Fri, 25 Aug 2011 20:58:39 GMT">item 1</p>

How could i use jQuery to order these P's by their data-date attribute?

Thanks

Upvotes: 11

Views: 25513

Answers (3)

Industrial Zombie
Industrial Zombie

Reputation: 61

The custom function suggested in Joseph's answer (the currently accepted solution) should return a numeric value, not a boolean. See This other question where this issue has already been raised showing that this function will not work in IE.

The "dates.compare(a,b)" function defined here looks like a better fit for use in jQuery's sort method.

Upvotes: 3

SeanCannon
SeanCannon

Reputation: 77966

function sortDates(a, b)
{
    return new Date(b).getTime() - new Date(a).getTime();
}

var dates = [];
var _old;

$('p').each(function(){
    _old = $(this).parent();
    dates.push($(this).data('date'));
});

var sorted = dates.sort(sortDates);
var _new = $('<div/>').insertBefore(_old);

$.each(sorted,function(i,val){
    $('p[data-date="' + val + '"]').appendTo(_new);
});

_old.remove();

Working demo: http://jsfiddle.net/AlienWebguy/JhgSw/

Upvotes: 3

Joseph Marikle
Joseph Marikle

Reputation: 78520

Demo

Super simple with an array sort:

$("p").sort(function(a,b){
    return new Date($(a).attr("data-date")) > new Date($(b).attr("data-date"));
}).each(function(){
    $("body").prepend(this);
})

Reverse order (in case I misunderstood you) is as easy as flipping the greater than symbol

$("p").sort(function(a,b){
    return new Date($(a).attr("data-date")) < new Date($(b).attr("data-date"));
}).each(function(){
    $("body").prepend(this);
})

Upvotes: 28

Related Questions