数字排序超过一位数

Question

应如何更改此代码以正确地按数字和字母顺序排序/排序？此解决方案不适用于100多个项目。

http://jsfiddle.net/C2heg/5329/

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

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

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

到目前为止，我唯一可以实施的可行解决方案是为所有商品提供一个三位数的数字，例如001，但这并不漂亮。 globalhungerindex.org/countries.html

Answer 1

使用parseFloat()函数来解析数值。

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

Answer 2

元素的text始终是字符串。要将其转换为数字，您需要将其转换为Number。

Number("20") = 20

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

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

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

body {
    background: #eee;
    font-family: sans-serif;
}
.box {
    background: red;
    height: 200px;
    width: 200px;
}
.box h1 {
    color: white;
    font-size: 3.5em;
    text-align: center;
}
.box h2 {
    color: black;
    font-size: 2.5em;
    text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
    <button id="alphBnt">Alphabetical</button>
    <button id="numBnt">Numerical</button>
    <div id="container">
      <div class="box">
        <h1>B<h1>
        <h2>10.35</h2>  
      </div>
    
      <div class="box">
        <h1>A<h1>
        <h2>119</h2>
      </div>
    
      <div class="box">
        <h1>D<h1>
        <h2>2</h2>  
      </div>
    
      <div class="box">
        <h1>C<h1>
        <h2>20</h2>
      </div>
    </div>
  </div>