如果 <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.1

2.Second p

3.2

4.3

预期输出：

1.1

2.Second p

3.3

4.4

Answer 1

我建议使用querySelectorAll而不是getElementsByTagName- 更精确。那么不要获取p文档中的所有元素；只需获取每个中的所有p元素即可li。可能是一种更优雅的方法来做到这一点，但嵌套循环方法有效：var li = document.querySelectorAll('ol li');for(var i = 0; i < li.length; i++) {&nbsp; var p = li[i].querySelectorAll('p');&nbsp;&nbsp;&nbsp; for(var j = 0; j < p.length; j++) {&nbsp; &nbsp; &nbsp; p[j].innerHTML = i + 1;&nbsp; }}<ol>&nbsp; &nbsp; <li>&nbsp; &nbsp; &nbsp; &nbsp; <p>First p element in div.</p>&nbsp; &nbsp; </li>&nbsp; &nbsp; <li>&nbsp; &nbsp; &nbsp; &nbsp; <span>Second p</span>&nbsp; &nbsp; </li>&nbsp; &nbsp; <li>&nbsp; &nbsp; &nbsp; &nbsp; <p>A third p element in div.</p>&nbsp; &nbsp; </li>&nbsp; &nbsp; <li>&nbsp; &nbsp; &nbsp; &nbsp; <p>A fourth p element in div.</p>&nbsp; &nbsp; </li></ol>

Answer 2

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