Question

I am stepping through each class of .days-due to add a countdown number until the due date. EG: Due in 2 days – Due Date:2/8/2013

I also want it to show negative days past due date.

http://jsfiddle.net/infatti/XeqPT/#base

The days due number is wrong and I cannot understand why?

<ul>
<li>Due in <span class="days-due"></span> days - Due Date is <span class="month">02</span>/<span class="day">08</span>/<span class="year">2013</span></li>
<li>Due in <span class="days-due"></span> days - Due Date is <span class="month">02</span>/<span class="day">10</span>/<span class="year">2013</span></li>
</ul>

function daysUntil(year, month, day) {
  var now = new Date(),
      dateEnd = new Date(year, month - 1, day), // months are zero-based
      days = (dateEnd - now) / 1000/60/60/24;   // convert milliseconds to days

  return Math.round(days);
}

var monthDue = $(this).next('.month').text();
var dayDue = $(this).next('.day').text();
var yearDue = $(this).next('.year').text();

$('.days-due').each(function(){
    $(this).text(daysUntil(yearDue, monthDue, dayDue));
});

Answer 1

$(this) in your context refers to the window.

next looks at the siblings. Your spans are not siblings of window.

Change your selector. Also, your code is looking at only one set of elements but your markup has two.

Try this

function daysUntil(year, month, day) {
    var now = new Date(),
        dateEnd = new Date(year, month - 1, day); // months are zero-based
    days = (dateEnd - now) / 1000 / 60 / 60 / 24; // convert milliseconds to days
    return Math.round(days);
}

$("li").each(function () {

    var monthDue = $(this).find('.month').text();
    var dayDue = $(this).find('.day').text();
    var yearDue = $(this).find('.year').text();

    $(this).find(".days-due").text(daysUntil(yearDue, monthDue, dayDue));

});

Find all your li elements, and loop through them doing your calculation. Since we’re selecting off li the context of this changes.