javascript - jQuery .each() を使用したアルファベットの「数値」div

Question

これを使用して、クラス「番号」を持つ div に番号を付けます。

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

しかし、代わりに「数値」に似たものをa、b、c、dなどとして使用するにはどうすればよいですか?

Answer 1

使用string.fromCharCode：

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

また、大文字を使用する場合は、97ではなく65を使用してください。

Answer 2

アルファベット文字の配列を作成できます。

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

次に、インデックスを使用してそれらを印刷します。

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

ご存知のように、順序付きリストを使用して、html と css を使用してこれを行うことができます。

html:

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

CSS:

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

Answer 3

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

ライブデモ

Answer 4

これはJavascriptで実行する必要がありますか？CSSカウンターは同じ効果を達成できます。

http://jsfiddle.net/UZwqu/1/

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

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

より詳しく：

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

Answer 5

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