HTML5 Sorting

by gercheq

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 id="gercek" 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

var sort = function(type) {
 
  var liarr = $('#review-contianers .review-container').toArray();
  console.dir(liarr);
  
  if(type=="highest") {
    liarr.sort(sortHighest);
  } else if(type=="lowest") {
    liarr.sort(sortLowest);
  } else if(type=="newest") {
    liarr.sort(sortNewest);
  } else if(type=="oldest") {
    liarr.sort(sortOldest);
  }
  $('#review-contianers').empty();
  $(liarr).appendTo($('#review-contianers'));
};

var sortHighest = function(a,b) {
  var rating1 = $(a).attr("data-rating");
  var rating2 = $(b).attr("data-rating");
  if (parseInt(rating1)<parseInt(rating2)) {
    return 1;
  } else if(parseInt(rating1)==parseInt(rating2)) {
    return 0;
  } else {
    return -1;
  }
};

var sortLowest = function(a,b) {
  var rating1 = $(a).attr("data-rating");
  var rating2 = $(b).attr("data-rating");;
  if (parseInt(rating1)>parseInt(rating2)) {
    return 1;
  } else if(parseInt(rating1)==parseInt(rating2)) {
    return 0;
  } else {
    return -1;
  }
};

var sortNewest = function(a,b) {
  var date1 = Date.parse($(a).attr("data-date"));
  var date2 = Date.parse($(b).attr("data-date"));
    alert(date1);
  if (date1<date2) {
    return 1;
  } else if(date1==date2) {
    return 0;
  } else {
    return -1;
  }
};

var sortOldest = function(a,b) {
  var date1 = Date.parse($(a).attr("data-date"));
  var date2 = Date.parse($(b).attr("data-date"));
  if (date1>date2) {
    return 1;
  } else if(date1==date2) {
    return 0;
  } else {
    return -1;
  }
};





$(document).ready(function() {
    
    // alert($('#gercek').attr('data-rating'));
    
    $('#newest').click(function(){
        // alert('sorting by newest');
        sort("newest");
    });
    
    $('#oldest').click(function(){
        sort("oldest");
    });
 
    $('#highest').click(function(){
        sort("highest");
    });
    
    $('#lowest').click(function(){
        sort("lowest");
    });    
    
    
});