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) + ". ");
});

此外，如果您想使用大写字符，请使用 65 而不是 97。

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++) + ". ");
  });