JQuery Countdown Plugin from its div value

I am trying to modify this JQuery Countdown plugin to initialize itself when it has a value in its div or span. I need because I'm building an application that will allow people to have any amount of countdowns on their page and they chose what the target date/time is.

As a reference, I'm doing my web app in ASP.Net, but I don't think it really matters for my problem.

The date will be coming from a Database but I will probably be converting it in seconds in the code-behind. Basically, I want to b开发者_Go百科e able to throw something like

<div id="93" class="countdown">300</div> /* Countdown of 300 seconds, 5 minutes */
<div id="104" class="countdown">19483</div> /*Countdown of 5 hours, 24 minutes and 43 seconds */

and initialize all this from a single line of JQuery

$(".countdown").countdown();

or

$(".countdown").countdown("initializeFromValue");

I'm starting to get familiar with JQuery itself, but I have a hard time changing the javascript in the back. I have started creating a new part in the code. My issue here is to verify if the div has a value in integer and then initialize the value of the Countdown to that value, deleting that value after.

I have also been trying in a test page to put 4 countdown:

    $(function () {
        $("#countdown").countdown({ until: $("#countdown").text() });
        $("#countdown2").countdown({ until: $("#countdown2").text() });
        $("#countdown3").countdown({ until: $("#countdown3").text() });
        $("#countdown4").countdown({ until: $("#countdown4").text() });
    });

This is working since every countdown has an unique ID and I can also get its own text value. But it is not flexible. Can I proceed from there as well? I know for sure that

$(".countdown").countdown({ until: $(this).text() });

doesn't work because it thinks that "this" is "document".

Can someone please redirect me to some documentation/tutorial that could help me fix this problem I have? Thank you.

$(".countdown").each(function(i) {
    $(this).countdown({ until: $(this).text() });
});

See .each() documentation at jQuery for more details. But within the scope of the closure passed to each(), this is the matched DOM element.

32bitkid has the right idea. Here is why:

when you use $(".countdown") you are selecting ALL of the divs that have class countdown. YOu can even assign them to an array and iterate through with a for loop but jquery gives us the .each() syntatic sugar so the idea is

 $(".countdown").each(function()   //loop through all divs with countdown as class
 {
   $(this).countdown({until: $(this).text()};  // "this" is not the specific div we are 
 }                                             //iterating on

Hope that helps with why his method works

I would use an each loop to create the correct context for this:

// all elements with id starting with 'countdown'
$("[id^='countdown']").each(function() {
    $(this).countdown({ until: $(this).text() });
});