I use this to number divs that have the class "number":

$("#parent .number").each(function(i){
    $(this).html((i+1) + ". ");
});

but how would I use something similar to instead "number" as a,b,c,d etc?

I use this to number divs that have the class "number":

$("#parent .number").each(function(i){
    $(this).html((i+1) + ". ");
});

but how would I use something similar to instead "number" as a,b,c,d etc?

• javascript
• jquery

Share Follow edited Oct 16, 2012 at 0:43 Fabrício Matté 70.2k2727 gold badges134134 silver badges167167 bronze badges asked Oct 16, 2012 at 0:41 Atom VayalinkalAtom Vayalinkal 2,70288 gold badges3030 silver badges3737 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 10

Use string.fromCharCode:

$("#parent .number").each(function(i){
    $(this).html(String.fromCharCode(97 + i) + ". ");
});

Also, if you would like to use capitalized characters, then use 65 instead of 97.

You can create an array of alphabet characters:

var alpha = ["a","b","c",....];

then use the index to print them:

$("#parent .number").each(function(i){
    $(this).html(alpha[i] + ". ");
    });

Just so you know, you can use an ordered list to do this using html and css:

The html:

<ol class="alpha">
   <li>text ...</li>
   <li>text ...</li>
   <li>text ...</li>
   <li>text ...</li>
</ol>

the css:

ol.alpha li {
   list-style-type:lower-alpha;
}

var index = 97;
$("#parent .number").each(function(i){
    $(this).html(String.fromCharCode(index++));
});

Live DEMO

Does this have to be acplished with Javascript? CSS counters could achieve the same effect:

http://jsfiddle/UZwqu/1/

#parent {
    counter-reset: my-counter;
}

#parent .number:before {
    content: counter(my-counter, lower-alpha);
    counter-increment: my-counter;
}​

More detail:

http://css-tricks./numbering-in-style/

var i=97;
$("#parent .number").each(function(){
    $(this).html(String.fromCharCode(i++) + ". ");
  });