javascript - 如何在编号列表中引用特定元素编号？

Question

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

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

我希望能够在步骤 10 中出现时以编程方式返回步骤编号(步骤 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 知道列表的位置？

Answer 1

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

$('[data-step]').each(function() {
  var s = $(this).data('step');
  var i = $(this).parent().parent().find('li[data-step-name=' + s + ']').index();
  $(this).html(i+1);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ol>
  <li>This is step 1</li>
  <li>This is step 2</li>
  <li data-step-name="widget">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, we jump to step <span data-step="last"></span> </li>
  <li>This is step 7</li>
  <li>This is step 8</li>
  <li data-step-name="last">This is step 9</li>
  <li>Take the widget that you created in step <span data-step="widget"></span> and do x.</li>
</ol>
<ol>
  <li data-step-name="widget">This is step 1. Create the widget.</li>
  <li>This is step 2</li>
  <li>This is step 3</li>
  <li>This is step 4, we jump to step <span data-step="last"></span> </li>
  <li data-step-name="last">This is step 5</li>
  <li>Take the widget that you created in step <span data-step="widget"></span> and do x.</li>
</ol>