How to order div's by a number (with decimals) in the content of this div

Question

I am trying to order some div's by a number in its content. I used this code:

jQuery("#Overzicht > div").sort(function(a, b) {
    var upA = jQuery('.distance-order', a).text().toUpperCase();
    var upB = jQuery('.distance-order', b).text().toUpperCase();
    return upA < upB; }).appendTo('#Overzicht');

I found this code at this item: How to sort nested divs depending upon content

But I just have a problem with getting it ordered at number (with decimals). You can find the whole set up over here: http://jsfiddle.net/84GRA/

score 1 · Answer 1 · answered Feb 05 '14 at 08:48

1

You used toUpperCase() on a number which won't do anything. To check for comparison between numbers, you need to parse it first with parseFloat()

Fiddle

answered Feb 05 '14 at 08:48

Aashray

2,753
16
22

The fiddle doesn't work, as the sort function doesn't return the expected results. (easiest to check if you change the `<` to `>`) – Cerbrus Feb 05 '14 at 08:58
I have not tampered with the sort function. I have just explained why he wasn't getting the expected result. The code which he got might have an issue. – Aashray Feb 05 '14 at 09:01
What I was trying to say is that the sort function was part of the problem ;-) – Cerbrus Feb 05 '14 at 09:05
Ah then that's fine :) – Aashray Feb 05 '14 at 10:35

score 0 · Accepted Answer · answered Feb 05 '14 at 08:52

Use:

jQuery("#Overzicht > div").sort(function(a, b) {
    var upA = parseFloat(jQuery('.distance-order', a).text());
    var upB = parseFloat(jQuery('.distance-order', b).text());
    return upB - upA;
}).appendTo('#Overzicht');

This replaces the toUpperCase with parseFloat, and returns a proper value from the sort function.

If you want to sort them in the other direction, simply switch upA and upB:

return upA - upB;

How to order div's by a number (with decimals) in the content of this div

2 Answers2