我正在尝试重写一首诗,我很想添加行号(只是 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>
最佳答案
您可以使用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>
关于javascript - 用行号填充 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61267284/