Sorting, deleting and adding items using jQuery does not work in IE

Question

This feature, which sorts my links, works like the charm of 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 for this code is at http://www.lambiek.net/webshop.html (click the "genre" button)

Answer 1

You need to replace this:

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

with

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

html uses the innerHTML property to remove content, and this is processed inconsistently among browsers, as you just saw. empty , however, uses the removeChild method and works sequentially in browsers. (By the way, jQuery 2.0 uses textContent .)

In addition, for your sort method to work sequentially, 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

Answer 2

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

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

Possible duplicate JS works in Firefox, but not in IE - cannot decide why .