HTML 带 "skip to" 标签的有序列表

Question

我有一个有序列表。在第 3 步，我需要告诉用户，如果土拨鼠看到他的影子，则跳到第 5 步。

我可以在第 3 步中使用标记来引用其他项目的编号吗？

一些伪标记：

<ol>
<li>One</li>
<li>Two</li>
<li>Three, if sees shadow skip to <shownumberfor="itemofinterest"/></li>
<li>Four</li>
<li id="itemofinterest">Five</li>
</ol>

编辑澄清：

数字“5”应该出现在第 3 项的内容中。如果 "Five" 在列表中向上或向下移动，我希望数字移动以指向新数字。

更多编辑

更改了项目名称以避免混淆。它可以移动。

Answer 1

我不推荐这个解决方案，因为我认为如果你改变html的内容，就把它全部改变。除非这个问题它只是图片的一部分，而且这个列表也会用 JavaScript.

动态生成

$('#itemofinterest-pointer').html(function(){
  return $('li').index($('#itemofinterest')) + 1 /* because the "index" function return the index in base 0 */;
});

/* If you use this code multiple times in your code, wrap this with a function and call it when you need. Don't duplicate the code */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ol>
  <li>One</li>
  <li>Two</li>
  <li>Three, if sees shadow skip to <span id="itemofinterest-pointer"></span><!--<shownumberfor="itemofinterest"/></li>-->
  <li>Four</li>
  <li id="itemofinterest">Five</li>
</ol>

HTML 带 "skip to" 标签的有序列表

HTML Ordered List with "skip to" tag

html

html-lists