conto alla rovescia multiplo su singola pagina

Question

Di seguito sono riportati i codici html per il conto alla rovescia. Sto usando il plugin jquery.countdown.min.js.

<ul id="example"> 
<li><span class="days">00</span><p class="days_text">Days</p></li> 
     <li class="seperator">:</li> 
     <li><span class="hours">00</span><p class="hours_text">Hours</p></li> 
     <li class="seperator">:</li> 
    <li><span class="minutes">00</span><p class="minutes_text">Minutes</p></li> 
     <li class="seperator">:</li> 
    <li><span class="seconds">00</span><p class="seconds_text">Seconds</p></li> 
    </ul> 

    <div id= "count" data-text="01/01/2016 05:06:59"></div> 

ed ecco il codice javascript.

<script type="text/javascript"> 
    var val1 = $('#count').data('text'); 

     $('#example').countdown({ 
      date: val1, 
      offset: 0, 
      day: 'Day', 
      days: 'Days' 
     }, function() { 
      alert('Done!'); 
     }); 
    </script> 

Sta funzionando bene e mi ha dato l'output desiderato. La limitazione è che posso usare solo un conto alla rovescia per pagina. Se voglio usare più sulla stessa pagina, devo aggiungere più codice javascript.

Di seguito è riportato lo scenario.

<ul id="example"> 
     <div data-countdown="01/01/2016 05:06:59"></div> 
     <div data-countdown="01/01/2017"></div> 
     <div data-countdown="01/01/2018"></div> 
     <div data-countdown="01/01/2020"></div> 
     </ul> 

Ho provato sotto il codice ma non funziona.

<script type="text/javascript"> 
    $('[data-countdown]').each(function() { 
    var $this = $(this),finalDate = $(this).data('countdown'); 
     $this.countdown({ 
      date: finalDate, 
      offset: 0, 
      day: 'Day', 
      days: 'Days' 
     }, function() { 
      alert('Done!'); 

     }); 
     }); 
    </script> 

Answer 1

Aggiornamento:

JSFiddle

<div id="example1" data-countdown="01/01/2016 05:06:59"></div> 
    <div id="example2" data-countdown="01/01/2017"></div> 
    <div id="example3" data-countdown="01/01/2018"></div> 
    <div id="example4" data-countdown="01/01/2020"></div> 

$(function(){ 
    $('[data-countdown]').each(function() { 
     var $this = $(this), finalDate = $(this).data('countdown'); 
     $this.countdown(finalDate, function(event) { 
     $this.html(event.strftime('%D days %H:%M:%S'))}).on('finish.countdown', function() { 
      alert("Finish"); 
      }); 
    }); 
}); 

Answer 2

JavaScript e HTML sono amici. Quando hai trovato qualcosa di strano accaduto nel codice js, prima convalidare l'html. Nel tuo caso, se ti infili "ul", usa la struttura "ul-li-div"; altrimenti usa "div-div" o "nav-div" o "section-div" se applicabile