sort() function in IE

Question

So this code doesnt seem to work with IE, I have not found anything that says it shouldn't. What am I doing wrong?

 <ul id="cars">
    <li id="2">Ford</li>
    <li id="1">Volvo</li>
    <li id="3">Fiat</li>
    </ul>



var list = $('#cars').children('li');
    list.sort(function(a,b){
        return parseInt(a.id) < parseInt(b.id);
    });
    $('#cars').append(list);

That's a jQuery function -- have you included the jQuery library, at least version 1.3.2? — Cᴏʀʏ, Mar 19 '12 at 14:38
@Cory Nope, it's not. https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/sort — Blazemonger, Mar 19 '12 at 14:40
Incidentally, IDs shouldn't begin with a number. Most browsers are relaxed about this, and HTML5 allows it, but it's still not a good habit. http://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html — Blazemonger, Mar 19 '12 at 14:42
Isn't that documented? I can't find anything: http://api.jquery.com/?s=sort — Bergi, Mar 19 '12 at 14:45
have a look at [jQuery javascript custom sort procedure works in Firefox, but IE doesn't seem to get it… ][1]. Should give you an idea. HTH, --hennson [1]: http://stackoverflow.com/questions/949951/jquery-javascript-custom-sort-procedure-works-in-firefox-but-ie-doesnt-seem-to — hennson, Mar 19 '12 at 14:50
have a look at [jQuery javascript custom sort procedure works in Firefox, but IE doesn't seem to get it… ](http://stackoverflow.com/questions/949951/jquery-javascript-custom-sort-procedure-works-in-firefox-but-ie-doesnt-seem-to) This sould give you an idea of how to do it. HTH, --hennson — hennson, Mar 19 '12 at 14:52

Matt Greer · Answer 1 · 2012-03-19T14:53:42.817

7

The sort function you pass in should return either a number less than zero (a comes before b), 0 (a and b are equivalent) or greater than 0 (a comes after b).

If you just do this, it should work:

return parseInt(a.id) - parseInt(b.id);

also can't hurt to pass in the radix argument to parseInt, it's a bit safer:

return parseInt(a.id, 10) - parseInt(b.id, 10);

edited Mar 19 '12 at 14:53

answered Mar 19 '12 at 14:39

Matt Greer

60,826
17
123
123

2

Always always pass in the radix argument to parseInt. Better safe than sorry. – Blazemonger Mar 19 '12 at 14:43
Always pass in the radix! If you need any reason to do so, just try `parseInt("09")` – Reinstate Monica Cellio Mar 19 '12 at 14:44
I think you need to process b-a, not a-b. – Blazemonger Mar 19 '12 at 14:47
@mblase75 -- it's actually a-b (assuming the OP wanted ascending sort), as this fiddle shows: http://jsfiddle.net/MZKcM/ but I can never remember how -1,0,1 sorters work and always have to quickly try an example :) – Matt Greer Mar 19 '12 at 14:50
@MattGreer Ah, I see -- the OP's IDs aren't in the same order as the names. – Blazemonger Mar 19 '12 at 14:52
@mblase75 It really could be either, just depends on what the OP wanted. – Matt Greer Mar 19 '12 at 14:59

Blazemonger · Answer 2 · 2012-03-19T14:58:07.837

It's considered incorrect in HTML4 to start IDs with numbers. This rarely causes problems in browsers, but it's also easily avoided.

I replaced your IDs with data- attributes, which are automatically extracted by the .data() method in jQuery and converted into numbers, eliminating the need for parseInt.

HTML:

<ul id="cars">
    <li data-val="2">Ford</li>
    <li data-val="1">Volvo</li>
    <li data-val="3">Fiat</li>
</ul>

JS:

$('#cars').children('li').sort(function(a, b) {
    return $(a).data('val')-$(b).data('val');
}).appendTo('#cars');

Fiddle: http://jsfiddle.net/qaytJ/1/

data- attributes are useful whenever you want to attach arbitrary data to HTML elements, and it's more "correct", or at least more appropriate, than forcing id or class to do a job it wasn't intended to do. Use them often.

sort() function in IE

2 Answers2