如何使用jQuery每秒减少一个HTML元素的值？

Question

这是我到目前为止有：

var timer = setInterval(function() { 
    $(".auctiondiv .auctiondivleftcontainer .countdown").text(sec--); 
}, 1000); 

这工作正常，但问题出现了，因为我要设置的sec启动时的价值，我的每个页面上的倒计时元素具有相同的值。因此，不要保存价值并减少价值，最好只是每个价值都得到价值并减少价值 - 而不必在Javascript中保存价值。

如何抓取.countdown元素（<p>标记）内的文本并从中删除一个并将其分配回同一个<p>元素？我感到困惑的是，我的页面上有很多.countdown元素，我将如何检查每个元素？

我还需要确保一个.countdown值一旦达到零，我可以做一些事情。可以这么说。我想我可以使用.parent()，但我们会看到。

任何指导？

Answer 1

您可以使用jQuery的each方法来遍历匹配的元素集合：

var timer = setInterval(function() { 
    $(".countdown").each(function() { 
     var newValue = parseInt($(this).text(), 10) - 1; 
     $(this).text(newValue); 
     if(newValue == 0) { 
      //Do something 
     } 
    }); 
}, 1000); 

我已经改变了选择，只是因为.countdown你说你在页面上很多这样的元素，我假设他们不会被你的原始选择器匹配，但你可以根据需要明显改变它。

这是上述代码的working example。

Answer 2

您应该将您不止一次使用的元素存储在变量中以节省资源。

此外，由于其行为不同，所以鼓励使用setTimeout而不是setInterval。你可以阅读为什么here。

// cache elements to save resources 
var $countdownElements = $(".countdown"); 

function countDown() { 

    $countdownElements.each(function() { 
     var $this = $(this); // again, cache element for later use 
     var newValue = parseInt($this.text(), 10) - 1; 
     $this.text(newValue); 
     if (newValue == 0) { 
      //Do something 
     } 
    }); 

    // call this function again in 1 second 
    setTimeout(countDown, 1000); 
} 

countDown();