JSFiddle - React, Tailwind, and code Playground
HTML
<ul>
<li datetime="2014-09-10 09:00:00">2</li>
<li datetime="2014-09-11 10:00:00">3</li>
<li datetime="2014-09-09 11:00:00">1</li>
</ul>
JavaScript
$.fn.sortMyData = function() {
var elements = $(this).find('> *');
// Create an array for the content
var arr = [];
for (var i = 0; i < elements.length; i++) {
arr.push(elements.eq(i));
}
arr.sort(function(a, b) {
var dateA = new Date(a.attr('datetime').replace(/([0-9]{4}\-[0-9]{1,2}\-[0-9]{1,2}) /, '$1T'))
var dateB = new Date(b.attr('datetime').replace(/([0-9]{4}\-[0-9]{1,2}\-[0-9]{1,2}) /, '$1T'))
if (dateA < dateB) {
return -1;
}
if (dateA > dateB) {
return 1;
}
return 0;
});
for (i = 0; i < arr.length; i++) {
$(this).append(arr[i]);
}
}
$('ul').sortMyData();