Microsoft Edge and Sorting with jQuery

Question

I have the following code which works fine with Firefox and Chrome, but with Microsoft Edge (default settings) the list items are not sorted — they are left unordered. I'm using MS Edge 20.10240.16384.0.

Has anyone seen this problem and found a solution? (id here is the container of the ul)

$( id + ' li' ).sort(function ( a, b ) {
    return parseFloat( $( a ).attr( "id" ).replace( 'page', '' ) )
         > parseFloat( $( b ).attr( "id" ).replace( 'page', '' ) );
}).appendTo( id + ' ul' );

JS fiddle example: https://jsfiddle.net/c1d8caa5/2/

Nope no errors reported - not sure if that deserves a -1 though? The question is still valid. — Ukuser32, Jan 07 '16 at 16:18
I didn't ding you. Can you create a fiddle that reproduces the issue? — j08691, Jan 07 '16 at 16:20
Ok so interesting - its not just edge. Jsfiddle reckon its wrong too but as I say it worked ok in FF and Chrome. — Ukuser32, Jan 07 '16 at 16:29
ok added Jquery and my example works with FF but not Edge! Case proved? — Ukuser32, Jan 07 '16 at 16:39
According to http://stackoverflow.com/questions/3630397 where this code originated - in Safari (back then) you needed to use a - instead of a >. If you replace the > with a - it will work in Edge. But surely Edge cannot allow you to compare two numbers in this way for a sort? — Ukuser32, Jan 07 '16 at 16:44
well, you're kinda supposed to return 1, 0, or -1 in the compare function. you're returning a boolean, so... possible unexpected results based on browser implementation. If you return 1 0 or -1, does it work in all browsers? — Kevin B, Jan 07 '16 at 16:47

Sampson · Accepted Answer · 2016-01-07T19:47:05.353

This code leverages the native Array.prototype.sort method, which is described in section 22.1.3.24 of the ECMAScript standard. This method accepts a single comparefn argument:

If comparefn is not undefined, it should be a function that accepts two arguments x and y and returns a negative value if x < y, zero if x = y, or a positive value if x > y. (emphasis added)

As such, make sure your compare function returns either -1, 0, or 1. Additionally, you can subtract one number from the other, which will yield a negative number, zero, or a positive number, and thus fulfilling the requirements.

While Microsoft Edge may not be in violation of the standard here, if other major browsers implement this more loosely (accepting Booleans), and Edge does not, this may be grounds to file an interop issue and see if Edge should be brought into alignment.

I work on the Edge team, and will file an issue for consideration.

Microsoft Edge and Sorting with jQuery

1 Answers1