Javascript Sort not sorting correctly

Question

I an issue with sorting div elements by price values. The functionality of the code works OK but it seems that it doesn't quite sort the numbers correctly.

As you can see from my jsfiddle when the button is pressed the number 21.35 comes after numbers 102.35 and 200.

Can anyone shed some light on this?

Here is the 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>

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

And here is the jsfiddle.

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

Answer 1

The reason you're getting these results is that your sort is not numeric, it is based upon canonical values of the numbers.

The reason why 21.35 comes after number 102.35 is because the digit 1 in 102.35 is smaller than the digit 2 in 21.35 and 0 in 200 is smaller than 1 in 21.35.

Fix: Parse to the numbers to float , before sorting

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

Updated fiddle

Answer 2

1. You need to parse to the numbers, use parseFloat.
2. You need to remove , from the text.

Code:

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

jsfiddle Demo

Demo:

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


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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<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>5510.25</h2>

    </div>
  </div>
</div>