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的联合。最好对模型进行排序，然后渲染/更新视图。最受欢迎的是Backbone.js，Angular.js，Ember.js。（Backbone非常适合初学，非常容易实现，并且有助于教授一些很棒的实践。）

Javascript没有正确排序价格

1 个答案: