JavaScript 未正确排序价格

Question

我正在使用以下代码对价格列表进行排序:

var $divs = $("div.machinebox");
var numericallyOrderedDivs = $divs.sort(function (a, b) {
            return $(a).find("p.price").text() < $(b).find("p.price").text() ? 1 : -1;
});
$("#machinewrapper").html(numericallyOrderedDivs); 

我想将价格列表从最高到最低排序，所以它们看起来像这样:

$549.00  
$387.00  
$248.99  
$242.91  
$97.01  
$32.04  

问题是它像这样对它们进行排序:

$97.01  
$549.00  
$387.00  
$32.04  
$248.99  
$242.91  

有什么想法可以让它正确排序吗？谢谢!

Answer 1

为了快速修复，我建议在元素的属性中存储未格式化的值。问题在于它是按字符排序，而不是按数字排序。

尝试这样的事情:

var $divs = $("div.machinebox");
var numericallyOrderedDivs = $divs.sort(function (a, b) {
            return parseFloat($(a).attr('data-sort')) < parseFloat($(b).attr('data-sort')) ? 1 : -1;
});
$("#machinewrapper").html(numericallyOrderedDivs); 

在这种情况下，只要您有 .price 商品，您就可以将 data-sort 值设置为父 div(以优化有点排序)。然后您可以解析该值上的 float 来比较字符串。

示例 HTML:

<div class="machinebox" data-sort="1367.42" >
  <a class="price">$1,367.42</a>
</div>

为了更好的解决方案:我强烈建议您使用一些 MV* 框架/库来更好地处理逻辑和 UI 的结合。更好的做法是对模型进行排序，然后渲染/更新 View 。最受欢迎的是 Backbone.js , Angular.js , Ember.js 。 (Backbone 非常适合入门，非常容易实现，并且有助于教授一些很好的实践。)