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/

jsfiddle.net/MikeGrace/Vgavb

Amirhossein Mehrvarzi
– Amirhossein Mehrvarzi

2015-07-17 12:08:33 +00:00
Commented Jul 17, 2015 at 12:08 — Amirhossein Mehrvarzi
– Amirhossein Mehrvarzi, Commented Jul 17, 2015 at 12:08

nalinc · Accepted Answer · 2015-07-17 12:14:23Z

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

edited Jul 17, 2015 at 12:14

answered Jul 17, 2015 at 12:06

nalinc

7,43327 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

SK2017 Over a year ago

If you dont mind, How would you get around sorting them if they all started with a £ sign?

Tushar · Accepted Answer · 2015-07-17 12:07:42Z

1

You need to parse to the numbers, use parseFloat.
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>

edited Jul 17, 2015 at 12:07

answered Jul 17, 2015 at 12:01

Tushar

87.4k21 gold badges164 silver badges182 bronze badges

3 Comments

Tushar Over a year ago

@AmirHosseinMehrvarzi Could you tell me what do you mean by not working

Amirhossein Mehrvarzi Over a year ago

Worked fine my friend :)

nalinc Over a year ago

@AmirHosseinMehrvarzi: His example is working fine.and the order is correct too

Collectives™ on Stack Overflow

Javascript Sort not sorting correctly

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related