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

Question

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

For example, my table looks like this, and I want to add a timer to 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, but I'm using $(this).next() , which will only add a timer to time_received td, but I need to add it to time_remaining td, which 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" }); ​});​ 

Answer 1

You can pass the selector next time and use the index to indicate that - in your case there is only one sibling with the time_remaining class, so it is the same

 .next(".time_remaining")[0] 

Alternatively, if you always want a second brother that you could do

 .nextAll()[1] 

Answer 2

.next() has an overload that accepts 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 ()

Answer 3

You can still use .next (), just go to the selector for the td you need.

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

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