HTML5 Sorting

HTML

<ul class="dc-list">
    <li id="newest">Newest First</li>
    <li id="oldest">Oldest First</li>
    <li id="highest">Highest Rated</li>
    <li id="lowest">Lowest Rated</li>
</ul>


<div class="" id="review-containers">
    
    <div data-date="2011-01-12 00:23:49" data-rating="3" class="review-container clearfix">3 stars on 2011-01-12 00:23:49</div>
    
    
    <div data-date="2011-01-11 00:07:50" data-rating="5" class="review-container clearfix">5 stars on 2011-01-11 00:07:50</div>
    
    
    <div data-date="2010-12-16 05:33:37" data-rating="2" class="review-container clearfix">2 stars on 2010-12-16 05:33:37</div>
    
    
    <div data-date="2008-11-16 23:03:12" data-rating="5" class="review-container clearfix">5 stars on 2008-11-16 23:03:12</div>
    
    <div data-date="2007-10-27 22:10:23" data-rating="1" class="review-container clearfix">1 star on 2007-10-27 22:10:23</div>
    
    
    <div data-date="2010-10-27 22:09:41" data-rating="3" class="review-container clearfix">3 stars on 2010-10-27 22:09:41</div>
    
    <div data-date="2009-04-24 08:19:08" data-rating="5" class="review-container clearfix">5 stars on 2009-04-24 08:19:08</div>
    
    
</div>

CSS

.dc-list{ margin-bottom: 40px; font-size:11px; }
.dc-list li { float: left; margin-right: 20px; }

.review-container{ margin-bottom: 10px; clear:both; }

JavaScript

(function($) {
    $.fn.reverseOrder = function() {
        return this.each(function() {
            $(this).prependTo($(this).parent());
        });
    };
})(jQuery);

$('#lowest').click(function() {

    $($('#review-containers > div').toArray().sort(function(a, b) {
        return $(a).attr('data-rating') - $(b).attr('data-rating');
    })).appendTo('#review-containers');

});

$(document).ready(function() {
    $('#review-containers .review-container').reverseOrder();

});