Question

给出一个orderered列表

<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中吗？

预期产出：

ipsum的
LOREM

项目2.是一个项目。

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

如果使用CSS的当前限制无法实现此类解决方案，则JavaScript解决方案就足够了。

Answer 1

对于每个<cite>代码，循环浏览<ol>个子代码，如果您找到一个具有id属性匹配<cite>的{{1}}属性的代码，请设置它的位置（+1）为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>

通过其反值

1 个答案: