простой многократный обратный отсчет

Question

У меня есть несколько<span class="timer">342</span> с различными значениями (секунд). Я хочу отсчет времени все они и думал, что я мог бы сделать что-то вроде:

  $('.timer').ready(function() { 
       timer = setInterval(function() { 
        sec = $('.timer').text(); 
        $('.timer').text(--sec); 
        if (sec == 0) { 
         clearInterval(timer); 
         location.href = 'accounts.php'; 
        } 
       }, 1000); 
      }); 

Ошибка, Javascript запутывается из-за более чем 1 объект .timer или что-то и порождает странные значения для пролетов.

Когда первый таймер достигает нуля, он должен перезаряжаться. Использование jQuery. Число пролетов не фиксировано. Мне бы очень хотелось держать его простым и не использовать дополнительный плагин или большой файл сценария.

Answer 1

.ready Используется только для document и маркирует точку, когда DOM полностью разбирается. В пределах этой функции this относится к документу. Я бы написать это по-другому:

$(document).ready(function() { 

    timer = setInterval(function() { 
     $('.timer').each(function(){ 
      var $this = $(this); 
      var countdown = parseInt($this.text()) - 1; 

      $this.text(countdown); 
      if (countdown == 0) { 
       clearInterval(timer); 
       location.href = 'accounts.php'; 
      } 
     }); 
    }, 1000); 
}); 

Важно:

1. Использование .each для перебора каждого таймера
2. Используйте parseInt, чтобы получить целое число из строки

Вот Example-Fiddle это работает.

Answer 2

Я получил его сам. это действительно работает (fiddle):

  timer = setInterval(function() { 
       $('.timer').each(function(index, el) { 
        sec = $(el).text(); 
        $(el).text(--sec); 
        if (sec == 0) { 
         location.href = 'accounts.php'; 
        } 
       }); 
      }, 1000);