我正在使用以下代码对价格列表进行排序:
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
有什么想法可以让它正确排序吗?谢谢!
最佳答案
为了快速修复,我建议在元素的属性中存储未格式化的值。问题在于它是按字符排序,而不是按数字排序。
尝试这样的事情:
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 非常适合入门,非常容易实现,并且有助于教授一些很好的实践。)
关于JavaScript 未正确排序价格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29325029/