使用jQuery创建带有样式编号的编号列表？

我需要在Wordpress站点中创建一个看起来像是带有彩色数字的有序列表

我知道如何用html手工制作。有几种方法，但假设我通过无序列表创建一个编号项目，例如

1。Lorem ipsum dolor sit amet

我会简单地删除CSS列表样式的项目符号：无

然而，我在这个网站上有很多这样的列表，我不想编辑每个列表的html；我宁愿用Wordpress的标准OL来管理它们，这样不懂HTML的用户就可以创建它们

我想我会用左边距和负文本缩进来“挂起”数字

---

在jQuery中处理这个问题最有效的方法是什么？

看起来你在CSS方面做得很好，因此你正在寻找如何将

span

放在列表的开头

如果是：

$("ol > li").each(function() {
    var $this = $(this);
    $this.prepend("<span>" + ($this.index() + 1) + " </span>");
});

|

---

---

旁注：如果您可以避免使用

span

，而是使用伪选择器

：before

或类似的，那么在支持它的浏览器上可能会更好。

如果您在一个页面上有多个OL（如果只有一个列表，也可以使用）。也适用于嵌套列表：

/* loop over each list so indexing of LI is done on per list basis*/
$("ol").each(function(){    
    $(this).children('li').each(function(index) {   
        $(this).prepend("<span>" + (index+ 1) + " </span>");
    });    
});

/*在每个列表上循环，以便在每个列表的基础上对LI进行索引*/
$（“ol”）。每个（函数（）{
$（this）.children（'li'）。每个（函数（索引）{
$（this.prepend（“+（index+1）+”）；
});    
});

可以使用每个

的第一个参数保存对
索引（）的多个调用
。。。啊，除了刚刚意识到为什么。。。你只是在编索引siblngs@charlietfl：否，传递给
每个
的
索引将是集合中的索引。
$this.index（）
返回的值将是相对于同级的索引。因此，如果您有多个
ol
，这很重要。对。这就是为什么我更新了我的评论。这很有效。谢谢
/* loop over each list so indexing of LI is done on per list basis*/
$("ol").each(function(){    
    $(this).children('li').each(function(index) {   
        $(this).prepend("<span>" + (index+ 1) + " </span>");
    });    
});