mehrere Countdown auf einzelne Seite

Question

Unten sind die HTML-Code für Countdown. Ich benutze jquery.countdown.min.js Plugin.

<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> 

und hier sind die JavaScript-Code.

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

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

Es funktioniert gut und gibt mir die gewünschte Ausgabe. Die Einschränkung ist, dass ich nur einen Countdown-Timer pro Seite verwenden kann. Wenn ich mehrere auf derselben Seite verwenden möchte, muss ich mehrere Javascript-Code hinzufügen.

Unten ist das Szenario.

<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> 

Ich versuchte unten Code, aber es funktioniert nicht.

<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

Update:

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 und HTML-Freunde sind. Wenn Sie im js-Code etwas seltsames gefunden haben, validieren Sie zuerst das HTML. In Ihrem Fall, wenn Sie auf der "ul" bleiben, verwenden Sie "ul-li-div" -Struktur; ansonsten benutze "div-div" oder "nav-div" oder "section-div" falls zutreffend