How to make this css code (counters and ;before) cross browser compatible using jquery?

Question

How to make this css code cross browser compatible using jquery. this code only works on firefox and IE8. i wan to use in IE6 and 7 also.

ol {list-style-type: none;}
li:before {content: "(" counter(section, lower-alpha) ") ";}
li { counter-increment: section;}

this is html

<ol class"fnotes">    
  <li> item 1 </li>
  <li> item 2 </li>
  <li> item 3 </li>
</ol>

and i need this output

(a) item 1

(b) item 2

(c) item 3

Answer 1

You can do it like this:

$(function() {
  $("li").each(function(i) {
    $(this).prepend("(" + String.fromCharCode(i + 97) + ") ");
  });
});

Note: 26 character limit :)

In case anyone needs to go crazy high, this goes from (a) to (zz) correctly, that should be plenty of footnotes...

$("li").each(function(i) {
    var prefix = "";
    if(i >= 26) {
        prefix = String.fromCharCode((i / 26 + 96));
        i = (i % 26)
    }
    $(this).prepend("(" + prefix + String.fromCharCode(i + 97) + ") ");
});​​​