1

I am trying to rewrite a poem and I would love to add the line numbers (just the multiple of 3). Is there any way to fill that span automatically instead of writing number by number by hand? Also I would need to restart the count for every different poem.

Thanks.

#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>
Federico
  • 1,392
  • 1
  • 17
  • 40

5 Answers5

2

Using getElementsByClassName() you can find all the <span> elements with class name of riga. The using Array.from().forEach() you can iterate through all the items where you can add dynamic values to each of the <span> elements with innerHTML.

See the example - which does not require jQuery:

const elems = document.getElementsByClassName('riga');
const value = 3;

Array.from(elems).forEach((e, i) => {
  e.innerHTML = value * (i + 1);
});
#poem {margin:20px 20vw}
.riga{float:right}
<div id=poem>
    Ora sen va per un secreto calle,<br>
    tra ’l muro de la terra e li martìri,<br>
    lo mio maestro, e io dopo le spalle.<span class=riga></span><br><br>

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

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

    E quelli a me: "Tutti saran serrati<br>
    quando di Iosafàt qui torneranno<br>
    coi corpi che là sù hanno lasciati.<span class=riga></span><br><br>

    Suo cimitero da questa parte hanno<br>
    con Epicuro tutti suoi seguaci,<br>
    che l’anima col corpo morta fanno.<span class=riga></span><br><br>

    Però a la dimanda che mi faci<br>
    quinc’entro satisfatto sarà tosto,<br>
    e al disio ancor che tu mi taci".<span class=riga></span><br><br>

    E io: "Buon duca, non tegno riposto<br>
    a te mio cuor se non per dicer poco,<br>
    e tu m’ hai non pur mo a ciò disposto".<span class=riga></span><br><br>

    "O Tosco che per la città del foco<br>
    vivo ten vai così parlando onesto,<br>
    piacciati di restare in questo loco.<span class=riga></span><br><br>

    La tua loquela ti fa manifesto<br>
    di quella nobil patrïa natio,<br>
    a la qual forse fui troppo molesto".<span class=riga></span><br><br>

    Subitamente questo suono uscìo<br>
    d’una de l’arche; però m’accostai,<br>
    temendo, un poco più al duca mio.<span class=riga></span><br><br>
</div>

I hope this helps!

norbitrial
  • 14,716
  • 7
  • 32
  • 59
  • thanks @norbitrial! What if I want to restart the count from 3 at every different poem on the same page? – Federico Apr 17 '20 at 09:07
  • @Federico Then I would reset the variable called `value` to `3` like `value = 3` and call again the `forEach`. But most probably wrapping into a function would be the best choice. – norbitrial Apr 17 '20 at 09:16
2

You can use document.querySelectorAll like this:

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>
Fraction
  • 11,668
  • 5
  • 28
  • 48
  • thanks @fraction. How would I restart the count if I have different poems and I always want to start from 3? – Federico Apr 17 '20 at 09:15
2
$('.riga').filter( function(index) {
    return $(this).text((index + 1) * 3);
})


$('.riga').filter(function( index ) {
    return $(this).text((index + 1) * 3);
})
#poem {margin:20px 20vw}
.riga{float:right}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id=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>
Danilo Körber
  • 858
  • 1
  • 7
  • 27
1

Try this

 //alert($( ".riga" ).closest( ".riga" ).val());
 var lineNumber=0;
 $('.riga').each(function(i, obj) {
   //alert($(obj).closest('.riga').text());
   lineNumber=lineNumber+3;
   $(obj).closest('.riga').text(lineNumber);
   
});
#poem {margin:20px 20vw}
.riga{float:right}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id=poem>
Ora sen va per un secreto calle,<br>
tra ’l muro de la terra e li martìri,<br>
lo mio maestro, e io dopo le spalle.<span class=riga></span><br><br>

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

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

E quelli a me: "Tutti saran serrati<br>
quando di Iosafàt qui torneranno<br>
coi corpi che là sù hanno lasciati.<span class=riga></span><br><br>

Suo cimitero da questa parte hanno<br>
con Epicuro tutti suoi seguaci,<br>
che l’anima col corpo morta fanno.<span class=riga></span><br><br>

Però a la dimanda che mi faci<br>
quinc’entro satisfatto sarà tosto,<br>
e al disio ancor che tu mi taci".<span class=riga></span><br><br>

E io: "Buon duca, non tegno riposto<br>
a te mio cuor se non per dicer poco,<br>
e tu m’ hai non pur mo a ciò disposto".<span class=riga></span><br><br>

"O Tosco che per la città del foco<br>
vivo ten vai così parlando onesto,<br>
piacciati di restare in questo loco.<span class=riga></span><br><br>

La tua loquela ti fa manifesto<br>
di quella nobil patrïa natio,<br>
a la qual forse fui troppo molesto".<span class=riga></span><br><br>

Subitamente questo suono uscìo<br>
d’una de l’arche; però m’accostai,<br>
temendo, un poco più al duca mio.<span class=riga></span><br><br>

...
</div>
Ajith
  • 1,447
  • 2
  • 17
  • 31
-1

Example code, add span automatically: 

const dv = document.getElementsByTagName('div');

for (let j = 0; j < dv.length; j++) {  
  const ps = dv[j].getElementsByTagName('p');
  for (let i = 0; i < ps.length; i++) {  
    (i+1)%3== 0 && i>1  ? ps[i].innerHTML   =ps[i].innerHTML  +'<span class=riga>'+(i+1)+'</span>':0;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id=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><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><br>

</div>


<div id=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><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><br>

</div>
H.T
  • 130
  • 11