javascript - 用行号填充 div

Question

我正在尝试重写一首诗，我很想添加行号(只是 3 的倍数)。有什么方法可以自动填充span，而不是用手写一个数字？另外，我需要为每首不同的诗重新开始计数。

谢谢。

#poem {margin:20px 20vw}
.riga{float:right}
p{margin:0;padding:0;display:inline-block}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class=poem>
<p>Ora sen va per un secreto calle,</p>
<p>tra ’l muro de la terra e li martìri,</p>
<p>lo mio maestro, e io dopo le spalle.</p><span class=riga>3</span><br><br>

<p>"O virtù somma, che per li empi giri</p>
<p>mi volvi", cominciai, "com’a te piace,</p>
<p>parlami, e sodisfammi a’ miei disiri.</p><span class=riga>6</span><br><br>

<p>La gente che per li sepolcri giace</p>
<p>potrebbesi veder? già son levati</p>
<p>tutt’i coperchi, e nessun guardia face".</p><span class=riga>9</span><br><br>

...
</div><br><br>

<div class=poem>
<p>Ora sen va per un secreto calle,</p>
<p>tra ’l muro de la terra e li martìri,</p>
<p>lo mio maestro, e io dopo le spalle.</p><span class=riga>3</span><br><br>

<p>"O virtù somma, che per li empi giri</p>
<p>mi volvi", cominciai, "com’a te piace,</p>
<p>parlami, e sodisfammi a’ miei disiri.</p><span class=riga>6</span><br><br>

<p>La gente che per li sepolcri giace</p>
<p>potrebbesi veder? già son levati</p>
<p>tutt’i coperchi, e nessun guardia face".</p><span class=riga>9</span><br><br>

...
</div>

Answer 1

您可以使用document.querySelectorAll像这样:

document.querySelectorAll(".poem").forEach(poem => {
  let n = 0;
  poem.querySelectorAll("span.riga").forEach(sp => {
    n += 3;
    sp.innerHTML = n;
  });
});

document.querySelectorAll(".poem").forEach(poem => {
  let n = 0;
  poem.querySelectorAll("span.riga").forEach(sp => {
    n += 3;
    sp.innerHTML = n;
  });
});

#poem {margin:20px 20vw}
.riga{float:right}

<div class="poem">
<p>Ora sen va per un secreto calle,</p>
<p>tra ’l muro de la terra e li martìri,</p>
<p>lo mio maestro, e io dopo le spalle.</p><span class=riga></span><br><br>

<p>"O virtù somma, che per li empi giri</p>
<p>mi volvi", cominciai, "com’a te piace,</p>
<p>parlami, e sodisfammi a’ miei disiri.</p><span class=riga></span><br><br>

<p>La gente che per li sepolcri giace</p>
<p>potrebbesi veder? già son levati</p>
<p>tutt’i coperchi, e nessun guardia face".</p><span class=riga></span><br><br>

...
</div><br><br>

<div class="poem">
<p>Ora sen va per un secreto calle,</p>
<p>tra ’l muro de la terra e li martìri,</p>
<p>lo mio maestro, e io dopo le spalle.</p><span class=riga></span><br><br>

<p>"O virtù somma, che per li empi giri</p>
<p>mi volvi", cominciai, "com’a te piace,</p>
<p>parlami, e sodisfammi a’ miei disiri.</p><span class=riga></span><br><br>

<p>La gente che per li sepolcri giace</p>
<p>potrebbesi veder? già son levati</p>
<p>tutt’i coperchi, e nessun guardia face".</p><span class=riga></span><br><br>

...
</div>