Javascript 有没有关于如何给ul的每一面都编号的想法？

我有一个更复杂的结构，它可以分解成这样的东西：

保险商实验室{
背景颜色：蓝色；
列表样式类型：无；
保证金：0；
填充：0；
宽度：100px；
高度：400px；
字号：0；
}
ul li.项目{
背景颜色：绿色；
宽度：100px；
高度：100px；
职位：绝对职位；；
}
li.item.top{
顶部：8px；
}
li.item.top-middle{
顶部：108px；
}
li.item.bottom{
顶部：308px；
}

基本上，我渲染一个ul，设置它的背景，然后执行一系列计算，将ul中的项目定位在非常特定的位置

我现在试图对ul的左右两侧的每个可能位置进行编号。这方面的原型将类似于：

ul内部的列表项掩盖了编号，但没有列表项的位置可以明显显示其编号

所以，我的问题是，做这件事的好方法是什么？将我的ul包装在另一个ul中，以数字作为列表项，然后通过z索引覆盖数字？其他想法

---

更新：我将尝试一个由两个ul组成的解决方案，一个嵌套在另一个ul中。一个负责编号，另一个负责保存内容。

我只需要使用CSS即可。我在快到的公共汽车上，但是

这个解决方案的关键是CSS计数器

body {
  counter-reset: li-counter;
}
li {
  counter-increment: li-counter;
}
li:before,
li:after {
  position: absolute;
  top: 45%;
  display: block;
  content: counter(li-counter);
}

一旦我回到家里，我会用浏览器支持、替代解决方案等更新更多内容

---

编辑：加布跳了进来，基本上写下了我要做的事情，所以我不会再详细说明了。话虽如此，我们似乎需要更多的信息来帮助您。我就这个问题写了一段长的评论，试图进一步澄清您可能的目的。

如果您可以用

ul

元素所支持的

li

的最大数量填充

元素，并用您可以使用的类标记空元素

这样您就不必计算特定的位置，只需将空的
li
标记为这样即可

<ul class="countable">
    <li class="item"></li>
    <li class="item"></li>
    <li class="item empty"></li>
    <li class="item"></li>
</ul>

演示在
您可以使用计数器重置属性


在LIs上使用CSS:after{content:attr（index）}，并使用简单的js/jQuery循环为每个LI添加一个索引。我对绿色项目的编号不感兴趣。我有兴趣让他们掩盖表明其立场的数字。如果我使用CSS:after，我将只能在列表中添加数字。根据您对Gaby答案的回复（基本上就是我发布的），我们可能需要更多信息。您可能知道，文本必须由页面上的某个元素呈现。您可以使用css计数器自动对空间进行编号，但您需要一组始终存在的元素。你可以考虑堆叠的ULs。第一个是静态的，没有内容（保存编号），第二个包含动态数量的列表项，按照您的意愿进行排列。另一个选项是使用JS动态生成标记。这两个看起来好吗？你提到了我在第一个问题中提到的东西——堆叠ULs。我只是不确定是否有更好的方法来做这件事，但它听起来像两个超链接，一个用于编号，一个用于项目的动态编号，将是合适的答案。我只是在想，当这些项目是数字的后代时，很难让它们覆盖在数字的顶部，但也许z-index会让它变得微不足道。@SeanAnderson只是在背景方向上轻轻推了一下。您可以使用动态背景（通过
canvas
生成）。参见（对于支持多种背景的moderns浏览器，您也可以使用自己的..参见）TIL关于CSS计数器。当你在家时，一定对你的完整解决方案感兴趣。我会继续修补的，谢谢！这绝对是我考虑过的，玩过之后就放弃了，我认为这太混乱了，必须有更简单的东西。如果没有其他选择，我肯定会选择这条路线，谢谢。）@SeanAnderson，如果你能发布一些关于你的具体案例和你试图完成的事情的信息，我们可能会建议一个更具体的路线。好的，ul implements jQuery Dragable和ul implements Dropable中的列表项。ul本身代表一个设备“机架”，每个li代表一个可以在机架内部拖动的设备。我想通过按计算间隔对ul编号来表示空闲插槽。叠加效果最好，因为它不会干扰我的拖放操作，但使用“dummy”li可以简化编号。所以，在我走上一条让事情变得不必要的复杂的道路之前，我试图评估各种选择。
<ul class="countable">
    <li class="item"></li>
    <li class="item"></li>
    <li class="item empty"></li>
    <li class="item"></li>
</ul>

ul.countable {
    background-color: blue;
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100px;
    height: 400px;
    font-size: 0;
    counter-reset: countable-li;
}
ul.countable li.item {
    background-color: green;
    width: 100px;
    height: 100px;
    position:relative;
    counter-increment:countable-li;
}
ul.countable li.empty{
    background-color:blue;
}
ul.countable li.empty:after,
ul.countable li.empty:before{
    content: counter(countable-li);
    font-family:courier;
    color:white;
    line-height:12px;
    font-size:12px;
    position:absolute;
    top:50%;
    right:5px;
    margin-top:-6px;
}
ul.countable li.empty:before{
    right:auto;
    left:5px;
}
ul.countable li:before,
ul.countable li:after{
    content:none;
}

    body {
  counter-reset: my-awesome-counter;
}
li {
  counter-increment: my-awesome-counter;
}

li:before {
  content: counter(my-awesome-counter);
    position:absolute;
    left:.5em;
    color:white;
}
li:after {
  content: counter(my-awesome-counter);
    position:absolute;
    right:.5em;
    color:white;
}

ul {
    background-color: blue;
    margin: 0;
    padding: 0;
    width: 100px;
    height: 400px;
}

li {
    position:relative;
}