5

This function that sorts my links works like a charm on Chrome/Safari/Firefox but not in IE. Can someone tell me why?

Symptom: everything disappears (line2) nothing appears (line3)

HTML: 

 <div class="genres">
   <a title="90 items" href="?genre=absurdism"><span>absurdism</span></a>
   <a title="83 items" href="?genre=action"><span>action</span></a>
   <a title="322 items" href="?genre=adult"><span>adult</span></a>
   <a title="2974 items" href="?genre=adventure"><span>adventure</span></a>
   <a title="106 items" href="?genre=about+comics"><span>about comics</span></a>
 </div>

SCRIPT: 

sorted = $('.genres a').sort(function(a, b) {
    return a.innerHTML > b.innerHTML
});
$('.genres').html('');
sorted.each(function(i, a) {
    $('.genres').append(a)
});

Fiddle: http://jsfiddle.net/MWkJg/2/

The online page of this code is on http://www.lambiek.net/webshop.html (click on "genre" button)

Richard Neil Ilagan
  • 14,627
  • 5
  • 48
  • 66
Dirk Zaal
  • 225
  • 2
  • 8
  • 1
    Did not work in chrome, historical was before art – Hogan Jul 07 '13 at 23:02
  • 2
    If you want to show us live code, please use [JS Fiddle](http://jsfiddle.net/), or similar, otherwise as soon as you've solved your problem the question becomes immediately less-useful to others. Plus JS Fiddle's easier for us to *see* and *edit* the code in place, rather than playing in the DOM inspector tools, or having to make our *own* experimental demo. – David Thomas Jul 07 '13 at 23:05
  • The code you gave [works fine for me](http://jsfiddle.net/MWkJg/), though using `.innerHTML` for sorting, and including the `` in there isn't very nice. –  Jul 07 '13 at 23:05
  • (Re. the sorting not working in Chrome) Is it possible that the `innerHTML` for some of your genre links starts with something other than the opening `` in your examples? For instance, some whitespace? If I modify @CrazyTrain's Fiddle and add newlines between just some of the ``s and their opening ``s, it fails as stated. – RichieHindle Jul 07 '13 at 23:09
  • Thanks for the Fiddle you made, also that one isnt the solution for IE – Dirk Zaal Jul 07 '13 at 23:10
  • I was wrong, it's not working, but get rid of the `.html('');` call. There's no reason for it. And then use `.localeCompare()` to compare the values, and it works... though I still say it's not nice to use `.innerHTML` like that. –  Jul 07 '13 at 23:13

2 Answers2

4

You need to replace this:

$('.genres').html('');

with

$('.genres').empty();

html uses the innerHTML property to remove contents, and this is handled inconsistently among browsers as you have just seen. empty, however, uses the removeChild method, and works consistently across browsers. (Incidentally jQuery 2.0 uses textContent.)

Also, for your sort method to work consistently, it needs to return a numeric value:

var sorted = $('.genres a').sort(function(a, b) {
    return a.innerHTML < b.innerHTML ? -1 :
            a.innerHTML === b.innerHTML ? 0 :
            1;
});

FIDDLE

1983
  • 5,882
  • 2
  • 27
  • 39
  • `.empty()` works like a charm in IE. If `.html()` is used in IE for emptying html content, it leads to lot of weird behaviours if the content is replaced again with other nodes. Great Answer. This answer should be accepted. – palerdot May 11 '15 at 06:34
0

Try making the comparison function passed to the sort method return a number instead of a boolean, i.e.

if (a.innerHTML > b.innerHTML) { return 1; };

Possible duplicate of JS sort works in Firefox but not IE - can't work out why.

Community
  • 1
  • 1
david_i_smith
  • 228
  • 3
  • 12