リファレンスそのカウンター値

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で可能ですか？

予想される出力：

1. Loremの

イプサム項目2.アイテムです。

本質的に<cite src="other"><cite>は、序数の内容をコピーする必要があります。

このような解決策が現在のCSSの制限では達成できない場合は、JavaScriptソリューションで十分です。すべての<cite>タグ、<ol>子供をループ、そしてあなたは1とし、<cite>マッチングid属性判明した場合については

Answer 1

S innerText年代src属性は、それが<cite>として位置（+1）です設定 '：

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>

EDIT：より効率的なソリューション：

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>