Sort div values with "." instead of "," correctly?

Question

I use the following script to sort div values, but the problem at this way of sorting is that it only works correctly with numbers if I use a "," instead of "." - is there any way to this with dots?

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

At my fiddle you can see that the dates are not correctly sorted if you click on "#numBnt".

My fiddle

You need to convert the date values to dates object to sort numerically. — Gone Coding, Jul 31 '15 at 13:51
First of all, learn how `sort` works. You should be returning a number, NOT a boolean. Once you've sorted that out, consider `.replace(/(\d)[.,](\d)/g,'$1$2')` or similar to remove punctuation from between numbers. Depending on how it's done, simply `/(\d),(\d)/` or `/(\d)\.(\d)/` would suffice. Or even `parseFloat`... — Niet the Dark Absol, Jul 31 '15 at 13:51
@Niet the Dark Absol: Check the JS Fiddle. The values are dates — Gone Coding, Jul 31 '15 at 13:51
@TrueBlueAussie To be honest I didn't notice the fiddle because I got it visually confused with the tags or something XD But that aside, a question should be self-sufficient, not relying on an external fiddle to actually see what's happening. — Niet the Dark Absol, Jul 31 '15 at 13:52
@Rahul Desai: there is no "," in my example, because "," works, but "." doesn´t work and I need "." — Pepe, Jul 31 '15 at 13:55

score 1 · Accepted Answer · edited May 23 '17 at 12:21

1

You need to convert the text with dates into JS Date object like this:

new Date( $(a).find("h2").text() ).

Updated fiddle

JS:

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) {
        // here is the change:
        return new Date($(a).find("h2").text()) - new Date($(b).find("h2").text());
    });
    $("#container").html(numericallyOrderedDivs);
});

Try playing around with different dates to test the fiddle.

Also go over this answer.

EDIT:

Fix for Firefox:

Firefox doesnt like . as the delimeter in dates. It needs to be replaced by /.

new Date($(a).find("h2").text().replace(/\./g, '/'))

Updated fiddle for Firefox.

Source

edited May 23 '17 at 12:21

Community

1
1

answered Jul 31 '15 at 14:00

Rahul Desai

13,802
14
75
128

Is it right, that it just work once? - if I click on #alphBnt and then on #numBnt again, it doesn´t work? – Pepe Jul 31 '15 at 14:03
@Pepe It works perfectly for me. Maybe its your cache? – Rahul Desai Jul 31 '15 at 14:04
In chrome the numbers are wrong and on IE and Firefox it doesn´t work correctly (buttons dead) ;(. – Pepe Jul 31 '15 at 14:08
@Pepe Please checkout my edit above. Tested in Firefox but not on IE. I dont have IE. – Rahul Desai Jul 31 '15 at 14:16
Thx for your support and update - that´s it, works fine! Big thx! – Pepe Jul 31 '15 at 14:24

Flash Thunder · Answer 2 · 2015-07-31T14:01:42.710

0

Use parseFloat($(a).find("h2").text().replace(",", ".")); for numbers...

And for dates...

(new Date($(a).find("h2").text())).getTime()

edited Jul 31 '15 at 14:01

answered Jul 31 '15 at 13:59

Flash Thunder

10,029
6
39
82

Sort div values with "." instead of "," correctly?

2 Answers2