Javascript 排序不正确排序

Question

我遇到了按价格值对 div 元素进行排序的问题。代码的功能工作正常，但它似乎没有完全正确地对数字进行排序。

正如您从我的 jsfiddle 中看到的那样，当按下按钮时，数字 21.35 出现在数字 102.35 和 200 之后。

任何人都可以阐明这一点吗？

这是html

<div class="wrap">
    <button id="numBnt">Numerical</button>
    <div id="container">
      <div class="box">
        <h2>10.35</h2>  
      </div>
            <div class="box">
        <h2>21.35</h2>  
      </div>
            <div class="box">
        <h2>21.35</h2>  
      </div>
            <div class="box">
        <h2>102.35</h2>  
      </div>
            <div class="box">
        <h2>10.35</h2>  
      </div>
            <div class="box">
        <h2>10.35</h2>  
      </div>
            <div class="box">
        <h2>10.95</h2>  
      </div>
            <div class="box">
        <h2>100.35</h2>  
      </div>
      <div class="box">
        <h2>100.05</h2>
      </div>

      <div class="box">
        <h2>200</h2>  
      </div>

      <div class="box">
        <h2>5,510.25</h2>
      </div>
    </div>
  </div>

和 javascript

var $divs = $("div.box");

$('#numBnt').on('click', function () {
    var numericallyOrderedDivs = $divs.sort(function (a, b) {
        return $(a).find("h2").text() > $(b).find("h2").text();
    });
    $("#container").html(numericallyOrderedDivs);
});

这是 jsfiddle。

http://jsfiddle.net/C2heg/370/

Answer 1

您得到这些结果的原因是您的排序不是数字，它基于数字的规范值。

为什么21.35的原因在数字 102.35 之后是因为数字 1在 102.35小于数字2在 21.35和 0在 200小于 1在 21.35 .

修复:在排序之前解析为 float 的数字

var numericallyOrderedDivs = $divs.sort(function (a, b) {
    return parseFloat($(a).find("h2").text()) > parseFloat($(b).find("h2").text());
});

已更新 fiddle