CODEWITHSUNDEEP
javascriptjquery
SK2017
SK2017

Reputation: 773

Very strange javascript sorting values behaviour

I have been messing around with this for hours and the only thing I can narrow it down to is that if there is 14 elements to sort, it doesn't work properly, but if there is thirteen, it works fine.

I am trying to do a basic sort of DIV elements by the price values they hold inside.

Here is the simple 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.00</h2> 
        </div>
        <div class="box">
             <h2>£5510.25</h2>

        </div>
         <div class="box">
             <h2>£19.80</h2>

        </div>
  <div class="box">
             <h2>£5510.25</h2>

        </div>
          <div class="box">
             <h2>£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 parseFloat($(a).find("h2").text().replace(/£/g, '')) > parseFloat($(b).find("h2").text().replace(/£/g, ''));
    });
    $("#container").html(numericallyOrderedDivs);
});

With 13 div elements, the divs are sorted perfectly.

here is an example - http://jsfiddle.net/C2heg/380/

Then if I add another and make it 14 divs, the sort doesn't work correctly.

here is an example - http://jsfiddle.net/C2heg/378/

I am litrally banging my head of the table! Hopefully someone can shed some light on this.

Upvotes: 0

Views: 59

Answers (2)

Igwe Kalu
Igwe Kalu

Reputation: 14868

Neither of your fiddles are working, and it has nothing to do with the number of elements.

This works though:

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

$('#numBnt').on('click', function () {
    var numericallyOrderedDivs = $divs.sort(function (a, b) {
        var a = parseFloat($(a).find("h2").text().replace(/£/g, ''));
        var b = parseFloat($(b).find("h2").text().replace(/£/g, ''));

        return a - b;
    });
    $("#container").html(numericallyOrderedDivs);
});

The sort function on comparing two items should return 0 if they are equal, a positive number if first is greater than second, a negative number otherwise.

Here's the updated fiddle.

Upvotes: 0

tymeJV
tymeJV

Reputation: 104775

Use a - b instead of a > b

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

Demo: http://jsfiddle.net/C2heg/381/

Upvotes: 2

Related Questions