Sort Divs by data-attibutes

by Bianca Kuehweidner

HTML

<div id="list">
    <div class="listing-item" data-price="20" data-duration="400" data-stops="3" data-sum="0">Price 20, Duration 400, Stops 3</div>
    <div class="listing-item" data-price="30" data-duration="350" data-stops="3" data-sum="0">Price 30, Duration 350, Stops 3</div>
    <div class="listing-item" data-price="10" data-duration="300" data-stops="2" data-sum="0">Price 10, Duration 300, Stops 2</div>
    <div class="listing-item" data-price="40" data-duration="500" data-stops="1" data-sum="0">Price 40, Duration 500, Stops 1</div>
</div>

<button id="btnPrice" type="button">Sort by price</button>
<button id="btnDuration" type="button">Sort by duration</button>
<button id="btnBest" type="button">Sort by overall best</button>

CSS

#list {
  padding: 20px;
}

JavaScript

var divList = $(".listing-item");

$("#btnPrice").click(function () {
   divList.sort(function(a, b) { 
     return $(a).data("price")-$(b).data("price")
   });
   $("#list").append(divList);
});

/* -------------------------------------------------- */

$("#btnDuration").click(function () {
   divList.sort(function(a, b) { 
     return $(a).data("duration")-$(b).data("duration")
   });
   $("#list").append(divList);
});

/* -------------------------------------------------- */

$("#btnBest").click(function () {
   
   var Price = [];
   var Duration = [];
   var Stops = [];
   
   
   divList.each(function() {
   		
     	Price.push($(this).data('price'));
      Duration.push($(this).data('duration'));
      Stops.push($(this).data('stops'));
      
   });
   
   
   for(i=0; i< divList.length; i++) {
      
       var PriceSum = 0;
   		 var DurationSum = 0;
       var StopsSum = 0;
       var OverallSum = 0;
   
      for(j=0; j < divList.length; j++) {
      
        //console.log(Price[i] + " / " + Price[j]);
        var newPriceSum = Price[i] / Price[j];
        var newDurationSum = Duration[i] / Duration[j];
        var newStopsSum = Stops[i] / Stops[j];
                
        PriceSum = PriceSum + newPriceSum;
        DurationSum = DurationSum + newDurationSum;
        StopsSum = StopsSum + newStopsSum;
      }
      
      var OverallSum = PriceSum + DurationSum + StopsSum;
      $(".listing-item" ).eq( i ).attr("data-sum", OverallSum);
      
      //console.log(i + ": " + PriceSum + " + " + DurationSum + " + " + StopsSum + " = " + OverallSum);
      
   } 
   
   divList.sort(function(a, b) { 
     return $(a).data("sum")-$(b).data("sum")
   });
   $("#list").append(divList);
   
});