Заполнение div с номером строки - PullRequest
Новая
       0

Заполнение div с номером строки

1 голос
/ 17 апреля 2020

Я пытаюсь переписать стихотворение, и я хотел бы добавить номера строк (только кратные 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>

Ответы [ 5 ]

2 голосов
/ 17 апреля 2020

Вы можете использовать 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>
2 голосов
/ 17 апреля 2020 
$('.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>
2 голосов
/ 17 апреля 2020

Используя getElementsByClassName(), вы можете найти все элементы <span> с именем класса riga. Используя Array.from().forEach(), вы можете перебирать все элементы, где вы можете добавлять значения Dynami c к каждому из <span> элементов с помощью innerHTML.

См. Пример - который не требует 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>

Надеюсь, это поможет!

1 голос
/ 17 апреля 2020

Попробуйте это 

 //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>
0 голосов
/ 17 апреля 2020

Пример кода, добавить диапазон автоматически: 

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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...