Jquery的.each方法不起作用

Question

我用javascript和jquery创建了倒计时。现在我想为每个.countdown html标记运行脚本。 我的脚本从div容器中获取data-attribute，然后根据数据值运行计时器。 目前我的脚本在所有div上显示相同的计时器。

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

改变这个：

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

要：

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

Answer 2

你差不多完成。在cmp = lambda x,y : 0 if x==y else -1 if x < y else 1 函数中添加each()函数。使用find()

查看内部元素的使用

countDownUpdate

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();
});

Answer 3

您可以尝试此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);
});

Answer 4

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

{{1}}