通過矩陣計算對div重新排序（根據MULTIPLE數據屬性值）

Question

我有要排序的產品清單。 按價格和持續時間排序很容易。 但我也想找到最佳的整體產品。

這是我到目前為止的內容：

  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 () { /* TBD */ }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="list"> <div class="listing-item" data-price="20" data-duration="400" data-stops="3">Price 20, Duration 400, Stops 3</div> <div class="listing-item" data-price="30" data-duration="350" data-stops="3">Price 30, Duration 350, Stops 3</div> <div class="listing-item" data-price="10" data-duration="700" data-stops="2">Price 10, Duration 700, Stops 2</div> <div class="listing-item" data-price="40" data-duration="500" data-stops="1">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> 

最好的整體產品應具有便宜的價格，較短的持續時間和盡可能少的停止時間。

我在這里考慮一種“矩陣計算”，將每個產品的每個因子與所有其他產品的相同屬性進行比較。 最后，我們將得到所有因子結果的總和。

例如

Product 1 has price of 20 and duration of 400 and stops = 3.
Product 2 has price of 30 and duration of 350 and stops = 3.

我將計算如下：

一種

20/30 = 0.66
400/350 = 1.14
3/3 = 1
SUM = 1.8

乙

30/20 = 1.5
350/400 = 0.875
3/3 = 1
SUM = 2.375

在此計算中，乘積A獲勝，因為所有因素的總和小於乘積B的所有因素的總和。

到目前為止，對於該理論。 但是我如何用JS實現呢？

Answer 1

好的，我現在能夠解決它。

$("#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++) {

           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);

});

如有興趣，請參閱工作的Fiddle。 https://jsfiddle.net/SchweizerSchoggi/k3af7pb0/