-2

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

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

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

我会用 CSS list-style:none 简单地删除项目符号。

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

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

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

4

2 回答 2

0

看起来你在 CSS 前端还不错，所以你正在寻找如何将spans 放在列表的开头。

如果是这样的话：

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

也许还可以在其中添加一个类，这样如果 JavaScript 没有运行，你就会得到无聊的旧数字，但如果是，你会得到样式化的数字。

$this.addClass('styled');

实例| 来源

旁注：如果您可以避免使用spansand 使用伪选择器:before或类似的方法，那么在支持它的浏览器上可能会更好。

于 2012-12-22T22:45:21.873 回答
0

如果您在一页上有多个 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>");
    });    
});
于 2012-12-22T22:53:42.710 回答