Question

Here’s what I have so far:

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

This works fine, but the problem arises because I have to set the value of sec on startup and every countdown element on my page has the same value. So instead of saving the value and decreasing that, maybe it’s best to just get the value each tick and decrease it – without saving the value anywhere in Javascript.

How can I grab the text inside of the .countdown element (a <p> tag) and subract one from it and assign it back to the same <p> element? What has me confused is that there are many .countdown elements on my page, how would I go through each one?

I also need to make sure that a .countdown value once it reaches zero, I can do something. A conditional so to speak. I imagine I can use .parent() on it, but we’ll see.

Any guidance?

Answer 1

You can use the jQuery each method to iterate over the matched set of elements:

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

I’ve changed the selector to just .countdown because you said you have many such elements on the page, and I’m assuming they’re not all going to be matched by your original selector, but you can obviously change that as necessary.

Here’s a working example of the above code.