如何傳遞（我的意思是顯示）的索引值<li></li> （在下面<ol></ol>默認類型）到<p></p>如果<p></p>在里面說<li></li> ?

Question

我這里要實現的是將<li></li>（在<ol></ol>默認類型下）的索引值顯示到<p></p>（可以是多個，很可能只有一個）在里面。

我的初始代碼：

<ol>
    <li>
        <p>First p element in div.</p>
    </li>
    <li>
        <span>Second p</span>
    </li>
    <li>
        <p>A third p element in div.</p>
    </li>
    <li>
        <p>A fourth p element in div.</p>
    </li>
</ol>

腳本：

<script>
    var x = document.getElementsByTagName('li');
    var y = document.getElementsByTagName('p');
    for(var j = 0; j < x.length; j++){
        for(var k = 0; k < y.length; k++) {
            if(x[j].index == y[k].index){
                y[j].innerHTML = j+1;
            }
        }
    }
</script>

OUTPUT：

1.1
2.Second p
3.2
4.3

預期 OUTPUT：

1.1
2.Second p
3.3
4.4

Answer 1

在您的代碼中， x[j].index 和 y[k].index 都未定義。 當這種情況發生時，您預計會發生什么？

Answer 2

我建議使用querySelectorAll而不是getElementsByTagName - 更准確。 然后不要獲取文檔中的所有p元素； 只需獲取每個li中的所有p元素。 可能是一種更優雅的方法，但嵌套循環方法有效：

 var li = document.querySelectorAll('ol li'); for(var i = 0; i < li.length; i++) { var p = li[i].querySelectorAll('p'); for(var j = 0; j < p.length; j++) { p[j].innerHTML = i + 1; } }

 <ol> <li> <p>First p element in div.</p> </li> <li> <span>Second p</span> </li> <li> <p>A third p element in div.</p> </li> <li> <p>A fourth p element in div.</p> </li> </ol>