Question

我是技术作家，我用来制作文档的软件基于HTML。我们所有的主题都是以HTML格式创建的，并使用CSS进行样式设计。

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

我希望能够在步骤10中以编程方式返回步骤编号（步骤3）。我不想放入＆＃34;步骤3＆＃34 ;在纯文本中，因为如果某人在其上方添加了新步骤，则纯文本引用将会中断。相反，我想获取列表项的位置，然后在步骤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>

而不是＆＃34;步骤3＆＃34;在上一节中，我想要的是：

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

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

Answer 1

使用CSS这显然是不可能的，但是这里有一个jQuery的想法，你可以依赖数据属性和一些空的跨度，你动态添加所需的内容：

＆＃13;

$('[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);
})

＆＃13;

<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>

＆＃13;

Answer 2

您需要使用某种变量来执行此操作。但是，HTML本身并不适合这项任务。

阅读此页面以获取有关在JavaScript中实现此功能的帮助：How do I make ordered list using javascript?

我很好奇你正在努力实现的目标，因为有更好的方法可以做到这一点。也许您可以编辑帖子以提供有关整个项目的更多详细信息？

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

2 个答案: