HTML5 Data Attribute Sort

Question

I'd like to sort DOM elements that has data attributes defined for rating and date. What is the best way to implement sorting on the front-end with jQuery?

Sample code can be seen on: http://jsfiddle.net/gercheq/zhqXd/

Here is the desired functionality implemented with tables: http://tablesorter.com/docs/

Thanks,

Answer 1

There is a cool jQuery plugin that sorts DOM elements by attribute. You can find it here: http://tinysort.sjeiti.com/

Example implementation: http://jsfiddle.net/statico/JNFFj/7/

Answer 2

Here is the basic idea...

var sortedSet = $('#sort li').toArray().sort(function(a, b) {
   return $(a).data('rating') - $(b).data('rating');
});

You select the elements, convert them to a proper array, and then sort (the comparison function I used is an example, change it to suit your requirements).

jsFiddle with lowest button.