如果 <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>输出：1.12.Second p3.24.3预期输出：1.12.Second p3.34.4

Answer 1

我建议使用querySelectorAll而不是getElementsByTagName- 更精确。那么不要获取p文档中的所有元素；只需获取每个中的所有p元素即可li。可能是一种更优雅的方法来做到这一点，但嵌套循环方法有效：

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>

Answer 2

在您的代码中，x[j].index 和 y[k].index 均未定义。当这种情况发生时，您预计会发生什么？