Order Numerically by more than single digits

Question

How should this code be altered to correctly order / sort numerically and alphabetically? This solution doesn't work for more than 100 items.

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);
});

The only workable solution I can implement so far is to give all items a three-digit number, e.g. 001, but this not pretty. globalhungerindex.org/countries.html

Note this alteration fixes some bugs in Chrome (but not the sorting problem) — , Aug 02 '18 at 16:26
$(window).load(function(){ var $divs = $("div.box"); $('#alphBnt').on('click', function() { var alphabeticallyOrderedDivs = $divs.sort(function(a, b) { return ($(a).find("h1").text() > $(b).find("h1").text() ? 1 : -1); }); $("#container").html(alphabeticallyOrderedDivs); }); $('#numBnt').on('click', function() { var numericallyOrderedDivs = $divs.sort(function(a, b) { return ($(a).find("h2").text() > $(b).find("h2").text() ? 1 : -1); }); $("#container").html(numericallyOrderedDivs); }); }); — , Aug 02 '18 at 16:26
[`return … > …` is not a valid comparison function](https://stackoverflow.com/q/24080785/1048572) — Bergi, Aug 02 '18 at 16:35
If we add more than a hundred items to the list, none of these solutions works. — , Aug 03 '18 at 15:27

score 1 · Answer 1 · answered Aug 02 '18 at 16:32

Use the parseFloat() function to parse the numerical value.

$('#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);
});

score 0 · Answer 2 · answered Aug 02 '18 at 20:41

The text of an Element is always a String. To convert it to a number, you will need to cast it to a 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>

@RorySturdy Did you try the code snippet? It seems to work for me. — Unmitigated, Aug 03 '18 at 15:44
@RorySturdy Could you please put your code in a JSFiddle for me? — Unmitigated, Aug 09 '18 at 17:20
Sure, here is your code, not working with more than 100 items: http://jsfiddle.net/pfxo07s9/11/ — , Aug 10 '18 at 13:54
Here is my code, working, but I have to type every number as three digits which is not pretty: http://jsfiddle.net/u9mLatdn/1/ — , Aug 10 '18 at 13:56
Note: I have included one blank entry, and fourteen non-numbered entries which will be required. These appear first in the numerical order, which is correct. — , Aug 10 '18 at 13:57

Order Numerically by more than single digits

2 Answers2