Question

我需要在Wordpress网站上创建一个带有彩色数字的有序列表。

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

<li><span>1. </span>Lorem ipsum dolor sit amet</li>

我会简单地用CSS list-style删除子弹：无。

但是，我在这个网站上有很多这些列表，并且不想为每个列表编辑html;我宁愿用Wordpress的标准OL来管理它们，所以不懂HTML的用户可以创建它们。

我想我会用左边和右边的文字缩进“挂起”数字。

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

Answer 1

看起来你在CSS方面非常好，所以你正在寻找如何将span放在列表的开头。

如果是这样的话：

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

也许还会在那里添加一个类，这样如果JavaScript没有运行，你会得到无聊的旧数字，但是如果它是你得到风格的那些。

$this.addClass('styled');

Live Example | Source

附注：如果您可以避免使用spans并使用伪选择器:before代替或使用伪选择器，那么在支持它的浏览器上可能会更好。

Answer 2

如果您在一个页面上有多个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>");
    });    
});

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

2 个答案: