Javascript 如何引用编号列表中的特定项目编号？

我是一名技术作家，我用来编写文档的软件是基于HTML的。我们所有的主题都创建为HTML，并使用CSS进行样式设置

在文档中，我将解释如何执行任务。您需要在步骤3中创建一个小部件，然后在步骤10中，您需要使用在步骤3中创建的小部件来执行其他操作

我希望在步骤10中出现步骤3时，能够以编程方式返回到步骤3。我不想在步骤3中使用纯文本，因为如果有人在上面添加新的步骤，纯文本引用将中断。相反，我希望获得列表项的位置，然后在步骤10中显示该位置编号

下面是一个简化的HTML示例：

<ol>
<li>This is step 1</li>
<li>This is step 2</li>
<li name="stepreference">This is step 3. Create the widget.</li>
<li>This is step 4</li>
<li>This is step 5</li>
<li>This is step 6</li>
<li>This is step 7</li>
<li>This is step 8</li>
<li>This is step 9</li>
<li>Take the widget that you created in step 3 and do x.</li>
</ol>

我想要的不是上一节中的第3步，而是：

<li> Take the widget that you created in step <variable> and do x.</li>

---

有没有办法做到这一点？是否有jQuery或其他JavaScript解决方案？我需要这样一些CSS编号，以便CSS知道列表的位置吗

对于CSS，这显然是不可能的，但是jQuery有一个想法，您可以依赖数据属性和一些空白范围，动态添加所需的内容：

$'[data step]'。每个函数{ var s=$this.data'step'； var i=$this.parent.parent.find'li[data step name='+s+']'.index； $this.htmli+1； } 这是第一步 这是第二步 这是第三步。创建小部件。 这是第4步 这是第5步 这是第六步，我们跳到第六步 这是第7步 这是第8步 这是第9步 以步骤中创建的小部件为例，执行x。 这是第一步。创建小部件。 这是第二步 这是第三步 这是第四步，我们跳到第四步 这是第5步 以步骤中创建的小部件为例，执行x。

---

当然不是按编号使用CSS…但可能是给每个步骤命名。