Javascript 更改有序列表上的编号？

您可以更改有序列表的起始编号，如下所示：

<ol start="3">
    <li>item three</li>
    <li>item four</li>
</ol>

项目三
项目四

…但是有没有办法使列表项具有任意编号，而不仅仅是连续编号

<ol>
    <li>item two</li>
    <li>item six</li>
    <li>item nine</li>
</ol>

项目二
项目六
项目九

我现在能看到的唯一方法是将每个

包装在自己的

中，这显然是不理想的。欢迎使用HTML、Javascript和CSS解决方案

---

ps：虽然项目编号是任意的，但它们仍然是有序的，所以不要担心语义问题，

li

上有

值

属性，尽管这是不推荐的：

<ol>
    <li value="2">item two</li>
    <li value="6">item six</li>
    <li value="9">item nine</li>
</ol>

第二项
第六项
第九项

报告说：

li元素的value属性 已在HTML 4.01中弃用，并且 XHTML 1.0严格DTD中不支持

注意：目前没有CSS 值属性的替代项

（尽管主页上的弃用警告使用了“使用样式”。）

建议它在那里仍然有效…

中，

上有一个弃用的
值
属性：

<ol>
<li value="30"> makes this list item number 30.
<li value="40"> makes this list item number 40.
<li> makes this list item number 41.
</ol>

因为计数器将始终重置
在它递增之前，开始我们的
用数字5列出我们将不得不
将计数器设置为4

看着这些答案让我觉得有点恶心。你真的想用LIs来做这个吗？如果这意味着创建“虚拟”lis、javascript或自定义CSS类，那么我将开始考虑其他可能性。安利（在我看来）的重点不是自己管理编号。如果您必须自己管理数字，那么您只能使用LI来管理样式-创建您自己的样式，然后将数字粘贴在一个或其他东西中如何？
不推荐的HTML方式

<ol>
   <li>List item 1</li>
   <li VALUE=5 TYPE="A">List item E</li>
   <li>List item 3</li>
</ol>


清单项目1
列出项目E
清单项目3



ol{
计数器重置：项目；
}
李{
显示：块；
}
李：在{
内容：柜台（项目）'；
反增量：项目；
}
#新号码{
计数器复位：第24项；
}
列表项

列表项
列表项
列表项
列表项
列表项

例如-

<ol id="reverse_numbering">
    <li>foo</li>
    <li>bar</li>
    <li>baz</li>
</ol>

福
酒吧
巴兹

这是你能做的-

<script type="text/javascript">
    var reverse = $('reverse_numbering');
    reverse.style.listStyle='none';
    var li = reverse.getElementsByTagName('li');
    for(var i=0; i<li.length; i++) {
        li[i].insertBefore(document.createTextNode(li.length-i+'. '), li[i].firstChild);
    }
</script>

var反向=$（“反向编号”）；
reverse.style.listStyle='none'；
var li=reverse.getElementsByTagName（'li'）；
对于（var i=0；i我认为这个问题是从语义开始的（您知道，语义是创建基于标准的页面的支柱之一）：您希望使用有序的列表来表示无序的列表

我的建议是：

1） 使用ul并根据类添加带有数字的图像（这可以通过编程完成，您只需生成一次数字图像，另外它还提供样式选项）

2） 使用定义列表。我知道它的延伸语义一点，但如果“术语”（dt）是“水平”的，而定义（dd）是纵横填字游戏的选项，我认为它变成了语义。使用此选项，您可以添加所需的数字，并使用您喜欢的任何标记设置其样式

希望这能有所帮助。
实际上比你想象的还要容易。你所做的基本上就是“暂停”一个列表，这样你就可以插入一些东西。在文本中执行此操作时，使用
div
标记。（铃响了吗？）

CSS

…

/*此样式删除了ol创建的缩进。在我的文档中是30pt*/

.pauselist{左边距：-30pt；}




XHTML

…

pText/p

pText/p

ol

li项目1/li

li第2项

div class=“pauselist”

pText/p

pText/p

pText/p

！--好的，现在让我们继续列表--

/div

/li

li项目3/li

li项目4/li

/ol

pText/p

pText/p




------结果---------
正文
正文

项目1
项目2
正文
正文
正文

项目3
项目4
正文
正文
我在下面发布了一个“黑客”javascript解决方案，但是，我很好奇，你为什么要这样做？对于纵横填字游戏的线索-由于向下和向下的单词被分成不同的列表，数字是不连续的。那么你最后做了什么呢？将每个li包装在自己的ol中。正如我所说的，这并不理想，但它是有效的。值attribute本来是不错的，但我的页面是XHTML严格的：（请查看我的修订答案，以防万一……有兴趣知道你的想法。因此，使用CSS选项，这将要求非顺序项包装在它们自己的OL中？示例并不完全相关。出于您的目的，您可以将规则更改为
OL li.myclass
。HTML5实际上再次允许@value，因为它实际上是n。）ot是一个表示属性。我不同意列表是无序的。它是按升序排列的，列表中的第五项是拼图中的第五个水平或垂直单词。只是每个单词的数量不是连续的。嗯，我本来不明白，所以我站在更正处：）我一直在思考这个问题，我认为使用a将是最“可降解”的。它在语义上是合理的，它将表明任何用户代理或浏览器（支持或不支持javascript）都可以访问和理解内容…缺点是如果列表是手动生成的。@nickf，很抱歉我更改了我的答案。我相信你的评论仍然有效，但你可能没有！感谢你在这个问题上花费了额外的时间。你说得很好-这种情况与使用列表的原始语义目的有所不同。我特别想使用不过，OL是为了便于造型
<ol id="reverse_numbering">
    <li>foo</li>
    <li>bar</li>
    <li>baz</li>
</ol>

<script type="text/javascript">
    var reverse = $('reverse_numbering');
    reverse.style.listStyle='none';
    var li = reverse.getElementsByTagName('li');
    for(var i=0; i<li.length; i++) {
        li[i].insertBefore(document.createTextNode(li.length-i+'. '), li[i].firstChild);
    }
</script>

...<br />

/* This style removes the indentation that &lt;ol&gt; creates. In my document it was 30pt */<br />
.pauselist {margin-left:-30pt;}
<br />
<br />
XHTML<br />
...<br />
&lt;p&gt;Text&lt;/p&gt;<br />
&lt;p&gt;Text&lt;/p&gt;<br />
&lt;ol&gt;<br />
  &lt;li&gt;Item 1&lt;/li&gt;<br />
  &lt;li&gt;Item 2<br />
    &lt;div class="pauselist"&gt;<br />
&lt;p&gt;Text&lt;/p&gt;<br />
&lt;p&gt;Text&lt;/p&gt;<br />
&lt;p&gt;Text&lt;/p&gt;<br />
&lt;!-- Okay now let's continue with the list --&gt;<br /> 
    &lt;/div&gt;<br />
  &lt;/li&gt;<br />
  &lt;li&gt;Item 3&lt;/li&gt;<br />
  &lt;li&gt;Item 4&lt;/li&gt;<br />
&lt;/ol&gt;<br />
&lt;p&gt;Text&lt;/p&gt;<br />
&lt;p&gt;Text&lt;/p&gt;<br />
<br />
<pre>