Jquery's .each method not working

Question

I have created countdown with javascript and jquery. Now i want run the script for each .countdown html markup. My script get data-attribute from the div container and then run timer according to the data value. Currently my script show the same timer on all divs.

<script>
// Countdown
function countDown() {
    function countDownUpdate(){
      var countDownValue = $(".count_down").attr("data-countdown");
      var countDownDate = new Date(countDownValue).getTime();
      var now = new Date().getTime();
      var distance = countDownDate - now; 
      var seconds = Math.floor((distance % (1000 * 60)) / 1000);  
      var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
      var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      var days = Math.floor(distance / (1000 * 60 * 60 * 24));

      $(".count_down-seconds").html(seconds); 
      $(".count_down-minutes").html(minutes); 
      $(".count_down-hours").html(hours); 
      $(".count_down-days").html(days); 

      if (distance < 0) {
          clearInterval(countDownUpdate);  
          $(".count_down-finish").show().siblings().remove();         
      }
   }
   countDownUpdate();
   setInterval(countDownUpdate, 1000);
}
// Run Component Function
$(document).ready(function(){
countDown();
});
</script>

<h1>Countdown</h1>
<div class="count_down" data-countdown="2017-06-30T22:00:00+05:30">
<span class="count_down-finish" >Timer End !</span>
<div><span class="count_down-days"></span><span class="count_down-separator">Days</span></div>
<div><span class="count_down-hours"></span><span class="count_down-separator">Hrs</span></div>
<div><span class="count_down-minutes"></span><span class="count_down-separator">Mins</span></div>
<div><span class="count_down-seconds"></span><span class="count_down-separator">Secs</span></div>
</div>
<div class="count_down" data-countdown="2018-06-01T22:00:00+05:30">
<span class="count_down-finish" >Timer End !</span>
<div><span class="count_down-days"></span><span class="count_down-separator">Days</span></div>
<div><span class="count_down-hours"></span><span class="count_down-separator">Hrs</span></div>
<div><span class="count_down-minutes"></span><span class="count_down-separator">Mins</span></div>
<div><span class="count_down-seconds"></span><span class="count_down-separator">Secs</span></div>
</div>
<div class="count_down" data-countdown="2018-06-01T22:00:00+05:30">
<span class="count_down-finish" >Timer End !</span>
<div><span class="count_down-days"></span><span class="count_down-separator">Days</span></div>
<div><span class="count_down-hours"></span><span class="count_down-separator">Hrs</span></div>
<div><span class="count_down-minutes"></span><span class="count_down-separator">Mins</span></div>
<div><span class="count_down-seconds"></span><span class="count_down-separator">Secs</span></div>
</div>

Bharatsing Parmar · Accepted Answer · 2017-06-03 12:55:03Z

You can try this Working Fiddle

function countDown(_this) {
  function countDownUpdate(ctl){
    var countDownValue = $(ctl).attr("data-countdown");
    var countDownDate = new Date(countDownValue).getTime();
    var now = new Date().getTime();
    var distance = countDownDate - now; 
    var seconds = Math.floor((distance % (1000 * 60)) / 1000);  
    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var days = Math.floor(distance / (1000 * 60 * 60 * 24));
    $(ctl).find(".count_down-seconds").html(seconds); 
    $(ctl).find(".count_down-minutes").html(minutes); 
    $(ctl).find(".count_down-hours").html(hours); 
    $(ctl).find(".count_down-days").html(days); 
    if (distance < 0) {
        clearInterval(countDownUpdate);  
        $(ctl).find(".count_down-finish").show().siblings().remove();         
    }
  }
    countDownUpdate();  
  setInterval( function() { countDownUpdate(_this); }, 1000 );
}

$(".count_down").each(function(){
  // Run Component Function
  countDown(this);
});

prasanth · Accepted Answer · 2017-06-03 12:59:52Z

you are almost done.simple add each() function inside the countDownUpdate function .Find the inner Element use with find()

function countDown() {
  function countDownUpdate() {
  $(".count_down").each(function(){
    var countDownValue = $(this).attr("data-countdown");
    var countDownDate = new Date(countDownValue).getTime();
    var now = new Date().getTime();
    var distance = countDownDate - now;
    var seconds = Math.floor((distance % (1000 * 60)) / 1000);
    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var days = Math.floor(distance / (1000 * 60 * 60 * 24));
    $(this).find(".count_down-seconds").html(seconds);
    $(this).find(".count_down-minutes").html(minutes);
    $(this).find(".count_down-hours").html(hours);
    $(this).find(".count_down-days").html(days);
    if (distance < 0) {
      clearInterval(countDownUpdate);
      $(this).find(".count_down-finish").show().siblings().remove();
    }
      })
  }
  

  countDownUpdate();
  setInterval(countDownUpdate, 1000);

}
// Run Component Function
$(document).ready(function() {
  countDown();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Countdown</h1>
<div class="count_down" data-countdown="2017-06-30T22:10:50+05:30">
  <span class="count_down-finish">Timer End !</span>
  <div><span class="count_down-days"></span><span class="count_down-separator">Days</span></div>
  <div><span class="count_down-hours"></span><span class="count_down-separator">Hrs</span></div>
  <div><span class="count_down-minutes"></span><span class="count_down-separator">Mins</span></div>
  <div><span class="count_down-seconds"></span><span class="count_down-separator">Secs</span></div>
</div>
<div class="count_down" data-countdown="2018-06-01T22:00:00+05:30">
  <span class="count_down-finish">Timer End !</span>
  <div><span class="count_down-days"></span><span class="count_down-separator">Days</span></div>
  <div><span class="count_down-hours"></span><span class="count_down-separator">Hrs</span></div>
  <div><span class="count_down-minutes"></span><span class="count_down-separator">Mins</span></div>
  <div><span class="count_down-seconds"></span><span class="count_down-separator">Secs</span></div>
</div>
<div class="count_down" data-countdown="2018-06-01T22:00:00+05:30">
  <span class="count_down-finish">Timer End !</span>
  <div><span class="count_down-days"></span><span class="count_down-separator">Days</span></div>
  <div><span class="count_down-hours"></span><span class="count_down-separator">Hrs</span></div>
  <div><span class="count_down-minutes"></span><span class="count_down-separator">Mins</span></div>
  <div><span class="count_down-seconds"></span><span class="count_down-separator">Secs</span></div>
</div>

Julian · Accepted Answer · 2017-06-03 14:59:24Z

1

Change this:

var countDownValue = $(".count_down").attr("data-countdown");

To:

$(".count_down").each(function(){
  var countDownValue = $(this).attr("data-countdown");
  //other stuff follows
})

edited Jun 3, 2017 at 14:59

Julian

37.3k24 gold badges138 silver badges196 bronze badges

answered Jun 3, 2017 at 12:51

Manoj Vadehra

8464 silver badges17 bronze badges

Comments

Ali Hesari · Accepted Answer · 2017-06-03 15:39:45Z

Use forEach because it's faster than each.

function countDown() {
  function countDownUpdate() {
  $(".count_down").get().forEach(function(el){
    var countDownValue = $(el).attr("data-countdown");
    var countDownDate = new Date(countDownValue).getTime();
    var now = new Date().getTime();
    var distance = countDownDate - now;
    var seconds = Math.floor((distance % (1000 * 60)) / 1000);
    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var days = Math.floor(distance / (1000 * 60 * 60 * 24));
    $(el).find(".count_down-seconds").html(seconds);
    $(el).find(".count_down-minutes").html(minutes);
    $(el).find(".count_down-hours").html(hours);
    $(el).find(".count_down-days").html(days);
    if (distance < 0) {
      clearInterval(countDownUpdate);
      $(this).find(".count_down-finish").show().siblings().remove();
    }
      })
  }

  countDownUpdate();
  setInterval(countDownUpdate, 1000);

}
// Run Component Function
$(document).ready(function() {
  countDown();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Countdown</h1>
<div class="count_down" data-countdown="2017-06-30T22:10:50+05:30">
  <span class="count_down-finish">Timer End !</span>
  <div><span class="count_down-days"></span><span class="count_down-separator">Days</span></div>
  <div><span class="count_down-hours"></span><span class="count_down-separator">Hrs</span></div>
  <div><span class="count_down-minutes"></span><span class="count_down-separator">Mins</span></div>
  <div><span class="count_down-seconds"></span><span class="count_down-separator">Secs</span></div>
</div>
<div class="count_down" data-countdown="2018-06-01T22:00:00+05:30">
  <span class="count_down-finish">Timer End !</span>
  <div><span class="count_down-days"></span><span class="count_down-separator">Days</span></div>
  <div><span class="count_down-hours"></span><span class="count_down-separator">Hrs</span></div>
  <div><span class="count_down-minutes"></span><span class="count_down-separator">Mins</span></div>
  <div><span class="count_down-seconds"></span><span class="count_down-separator">Secs</span></div>
</div>
<div class="count_down" data-countdown="2018-06-01T22:00:00+05:30">
  <span class="count_down-finish">Timer End !</span>
  <div><span class="count_down-days"></span><span class="count_down-separator">Days</span></div>
  <div><span class="count_down-hours"></span><span class="count_down-separator">Hrs</span></div>
  <div><span class="count_down-minutes"></span><span class="count_down-separator">Mins</span></div>
  <div><span class="count_down-seconds"></span><span class="count_down-separator">Secs</span></div>
</div>

Collectives™ on Stack Overflow

Jquery's .each method not working

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related