Good morning! I have the following problem, I have the view below that works as a timeline, inside it I have some publications. I get to each of the publications and get the amount in minutes that are missing to expire / start. The problem is that I can not put more than one countdown timer at the same time (on the page) while looping the for loop. I tried pulling the loop, doing just one post and it works normally .. Can someone give me a North?
function DecrementaTempo(){
publicacoes = $(".row");
//for (var row = 0; row < publicacoes.length; row++) {
var rowChild = publicacoes[0];
var publicacao = rowChild.getElementsByClassName('card-content white col l6')[0];
var span = publicacao.getElementsByTagName('p')[5];
var tempoRestante = parseInt(span.getElementsByTagName('span')[0].textContent);
if (tempoRestante > 0)
{
console.log("tempo: " + tempoRestante);
var cronometroTempo = setInterval(function(){
tempoRestante --;
console.log("decrementando: " + tempoRestante);
span.getElementsByTagName('span')[0].textContent = tempoRestante;
if (parseInt(span.getElementsByTagName('span')[0].textContent) == 0)
{
console.log("Entrou na parada!");
var nav = $("#nav-wrapper");
nav.addClass('mudacor');
window.location.reload();
clearInterval(cronometroTempo);
}
tempoRestante = parseInt(span.getElementsByTagName('span')[0].textContent);
}, 1);
//}
}
<div class="container">
<div class="row">
<div class="card col l6">
<div class="card-image col l4 pull-l1">
<img src="../../images/image1.jpg">
</div>
<div class="card-content white col l6">
<p>1</p>
<p>Postagem 1</p>
<p>Desc Pub 1</p>
<p id="horaInicial">2018-07-23 16:40:16</p>
<p id="horaFinal">2018-07-29 16:40:19</p>
<p id="boxText"> Tempo:
<span id="tempoRestante">467</span></p>
<p>30.00</p>
<p></p>
<p>http://imagem1.com</p>
<p>0</p>
</div>
</div>
</div>
<div class="row">
<div class="card col l6">
<div class="card-image col l4 pull-l1">
<img src="../../images/image1.jpg">
</div>
<div class="card-content white col l6">
<p>1</p>
<p>Postagem 1</p>
<p>Desc Pub 1</p>
<p id="horaInicial">2018-07-23 16:40:16</p>
<p id="horaFinal">2018-07-29 16:40:19</p>
<p id="boxText"> Tempo:
<span id="tempoRestante">467</span></p>
<p>30.00</p>
<p></p>
<p>http://imagem1.com</p>
<p>0</p>
</div>
</div>
</div>
</div>