CODEWITHSUNDEEP
javascriptjqueryhtml
user1840724
user1840724

Reputation: 83

Add countdown timer to <td> based on text of other <td> in the table

I am trying to add a countdown timer (using this one http://keith-wood.name/countdown.html) to a td based on the text of another td within the same table using jQuery.

For example my table looks like this below and I want to add the timer to the time_remaining td if the status td contains the text "Received".

<table>
    <tr>
        <td class="status">Completed</td>
       <td class="time_received"></td>
       <td class="time_remaining"></td>
    </tr>
    <tr>
        <td class="status">Received</td>
        <td class="time_received"></td>
        <td class="time_remaining"></td>
    </tr>        
</table>

And my jQuery currently looks like this below, but I'm using $(this).next() which will only add the timer to the time_received td, but I need to add it to the time_remaining td, what can I use instead of .next()? Any help would be appreciated.

 var newCount = new Date(); 
 newCount.setMinutes(newCount.getMinutes() + 30);
 $('td.status:contains(Received)').each(function() {
   $(this).next().countdown({
        until: newCount, 
        format: 'M',
        layout: "{mn} min"
        });
​});​

Upvotes: 4

Views: 1017

Answers (3)

Selosindis
Selosindis

Reputation: 544

You can still use .next(), just pass in the selector for the td you want.

$(this).next('.time_remaining').countdown({});

Check out the documentation for more information: http://api.jquery.com/next/

Upvotes: 0

Enrico
Enrico

Reputation: 10665

You can pass a selector to next and use an index to specify which - in your case there is just one sibling with the time_remaining class, so it's the same

.next(".time_remaining")[0]

Alternatively, if you always want the second sibling you could do

.nextAll()[1]

Upvotes: 2

Mathew Thompson
Mathew Thompson

Reputation: 56429

.next() has an overload that takes a selector, so you can use:

var newCount = new Date(); 
newCount.setMinutes(newCount.getMinutes() + 30);
$('td.status:contains(Received)').each(function() {
    $(this).next(".time_remaining").countdown({
        until: newCount, 
        format: 'M',
        layout: "{mn} min"
    });
});

See here: JQuery .next()

Upvotes: 2

Related Questions