javascript - 按反值引用列出的元素

Question

给定一个有序列表

<ol>
    <li id="item">ipsum</li>
    <li id="other">lorem</li>
<ol>
<span>The item <cite src="other?"></cite> is an item.</span>

是否可以按顺序值引用列出的元素？例如如果我写 <cite src="other"><cite> , 它会显示为 Item (2) ？我无法事先知道它在列表中的位置，因此需要以某种方式自动完成；这在 css 中可行吗？

预期输出:

1. 假设
2. 洛伦

元素 2. 是一个元素。

本质上是 <cite src="other"><cite>应复制序数值的内容。

如果在 CSS 的当前限制下无法实现这样的解决方案，那么 JavaScript 解决方案就足够了。

Answer 1

对于每个 <cite>标签，循环遍历<ol> children ，如果你找到一个和id属性匹配<cite>的 src属性，将其位置 (+1) 设置为 <cite>的 innerText :

var cites     = document.getElementsByTagName("cite");
var listItems = document.getElementById("my-items").children;

for(var i = 0; i < cites.length; i++) {
    var cite = cites[i];
    var src = cite.getAttribute("src");

    for (var j = 0; j < listItems.length; j++) {
        var id = listItems[j].getAttribute("id");
        if(id === src) {
             cite.innerText = j + 1;
             break;
        }
    }
}

<ol id="my-items">
    <li id="item">ipsum</li>
    <li id="other">lorem</li>
<ol>
<span>The item <cite src="other"></cite> is an item.</span>

编辑: 更有效的解决方案:

var listItems = document.getElementById("my-items").children;

for(var i = 0; i < listItems.length; i++ ) {
  var id = listItems[i].getAttribute("id");
  var cite = document.querySelector("[src='" + id + "']");
  if(cite) cite.innerText = i + 1;
}

<ol id="my-items">
    <li id="item">ipsum</li>
    <li id="other">lorem</li>
<ol>
<span>The item <cite src="other"></cite> is an item.</span>