The code below works fine for dynamically reordering links in firefox, but for some reason not in IE (version 7). Any ideas what part of the code is causing problems? Thanks.
var parent = $('#itemHolder');
var children = $('a', parent);
var children = $('a', parent).sort(function(a, b) {
return parseInt($(b).attr('amount')) - parseInt($(a).attr('amount'));
});
$.each(children, function(i, child) {
parent.append(child);
});
I think the problem relates to the comments that @Les and @Kobi made, in that you are adding attributes to elements in the HTML without defining an additional namespace. Since they aren't defined in the root namespace a browser might ignore them.
The first solution would be to namespace the additional attributes and set the doctype to some type of XHTML, this should fix the problem in most browsers. Here is how you would do this:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:myNS="http://uri.for.your.schema" xml:lang="en" lang="en">
<!---more html---->
<a myNS:amount="someAmount" ><!-----></a>
<!---more html--->
</html>
With quirksmode and all sorts of other weird things that can happen when a browser parses a document (IE in particular), you may want to think of another solution to your problem. Instead of storing the data in the HTML as an attribute, why not use the jQuery data() function to store the amount data key for the elements within jQuery, then retrieve the value for the sort.
// Store a value
$.data(theElement, 'amount', value);
// Retrieve the value in your sort
function(a, b)
{
return parseInt($.data(b, 'amount')) - parseInt($.data(a, 'amount'));
}
I kept the parseInt call in there because I'm not sure what datatype you'll store the amounts as. I'm not sure whether you are generating these amount attributes on the server or on the client, so the second solution may not be ideal for you. You could always generate a JSON string on the server that stores the values and embed it into the document in a script tag as an object. Then you could access the values and store them referenced to the objects within jQuery on the client.
EDIT: The important thing to realize about my doctype and namespace answer is that there is a difference between HTML/XHTML and the DOM. One of the nice things about jQuery is that it makes that difference less of a hassle, but it's still important to understand that there is a difference. jQuery deals with the DOM, which is created by the browser from the parsed document. A quick look at quiksmode will tell you that depending on the doctype of the document and the mode the browser parses it in all sorts of weird things can happen. My gut feeling is that this is one of those issues. There is nothing wrong with extending XHTML with custom attributes (hence the X in XHTML), for example Adobe's spry framework makes interesting use of custom attributes in the XHTML source to define custom widgets and regions to be created after the DOM is loaded. However, as with everything in web development you have to code to standards, otherwise your leaving it up to the browser to try and figure out what you are trying to do, and it will sometimes (in the case of IE usually) be wrong.