$this isn't working inside a function which is inside an .each() function

Question

I have the below code, I believe the $this is not firing in the if statements as it is not adding either class. However, if I change it to look just for the class without the $this it adds both classes (because I have 2 coupons on the page, 1 which triggers the if and 1 that triggers the elseif). I am unsure on how to make the $this.find() trigger inside the if statement.

jQuery(document).ready(function($) {
    if ($('.clockdiv')[0]) {
        $('.couponWrap .coupons li').each(function() {
          // Set the date we're counting down to
          var deadlineYear = $(this).find("div .clockdiv .year").attr("rel");
          var deadlineMonth = $(this).find("div .clockdiv .month").attr("rel");
          var deadlineDay = $(this).find("div .clockdiv .days").attr("rel");
          var deadlineHour = $(this).find("div .clockdiv .hours").attr("rel");
          var deadlineMinute = $(this).find("div .clockdiv .minutes").attr("rel");
          var deadlineSecond = $(this).find("div .clockdiv .seconds").attr("rel");
          var couponExpired = $(this).find("div .clockdiv").attr("rel");

          var countDownDate = new Date(deadlineYear + "/" + deadlineMonth + "/" + deadlineDay + " " + deadlineHour + ":" + deadlineMinute + ":" + deadlineSecond).getTime();
          var startDate = new Date($(this).find("div .clockdiv .start").attr("rel"));

          // Update the count down every 1 second
          var x = setInterval(function() {

            // Get todays date and time
            var now = new Date().getTime();

            // Find the distance between now and the count down date
            var distance = countDownDate - now;

            // Time calculations for days, hours, minutes and seconds
            var days = Math.floor(distance / (1000 * 60 * 60 * 24));
            var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
            var seconds = Math.floor((distance % (1000 * 60)) / 1000);

            // Output the result in an element with id="demo"

            document.getElementById("days").innerHTML = days;
            document.getElementById("hours").innerHTML = hours;
            document.getElementById("minutes").innerHTML = minutes;
            document.getElementById("seconds").innerHTML= seconds;

            // If the count down is over, write some text 
            if (distance < 0) {
              clearInterval(x);
              document.getElementById("clockdiv").innerHTML = "<p>" + couponExpired + "</p>";
            }

            //Works but only for 1st start date
            //var testDate = $("div .clockdiv .start").attr("rel"); //2018/09/28 17:00:00

            var startDateNew = new Date(startDate);
            var startDateNewer = new Date(startDate);
            var newOldDate = new Date(startDateNewer.setDate(startDateNew.getDate() + 7));

            //alert(startDate + ", " +  startDateNew + ", " + startDateNewer + ", " + newOldDate);

            //This works fine
            var nowDateNew = new Date().getTime();

            //alert(nowDateNew - newOldDate.getTime());

            if (days <= 7) {
              $(this).find('div.couponDiv').addClass("old-coupon");
            } else if ((nowDateNew - newOldDate.getTime()) < 0) {
              $(this).find('div.couponDiv').addClass("new-coupon");
            }
          }, 1000);
        });
      }
});

The specific code snippet in question is:

if (days <= 7) {
    $(this).find('div.couponDiv').addClass("old-coupon");
} else if ((nowDateNew - newOldDate.getTime()) < 0) {
    $(this).find('div.couponDiv').addClass("new-coupon");
}

Thanks for commenting on this i defined self as $(this) and used that, worked a charm. You're a star! — Daniel Vickers, Oct 17 '18 at 17:34

score 1 · Accepted Answer · answered Oct 17 '18 at 17:34

just set var outside the function for example:

jQuery(document).ready(function($) {
    if ($('.clockdiv')[0]) {
        $('.couponWrap .coupons li').each(function() {
          // Set the date we're counting down to
          var deadlineYear = $(this).find("div .clockdiv .year").attr("rel");
          var deadlineMonth = $(this).find("div .clockdiv .month").attr("rel");
          var deadlineDay = $(this).find("div .clockdiv .days").attr("rel");
          var deadlineHour = $(this).find("div .clockdiv .hours").attr("rel");
          var deadlineMinute = $(this).find("div .clockdiv .minutes").attr("rel");
          var deadlineSecond = $(this).find("div .clockdiv .seconds").attr("rel");
          var couponExpired = $(this).find("div .clockdiv").attr("rel");

          var countDownDate = new Date(deadlineYear + "/" + deadlineMonth + "/" + deadlineDay + " " + deadlineHour + ":" + deadlineMinute + ":" + deadlineSecond).getTime();
          var startDate = new Date($(this).find("div .clockdiv .start").attr("rel"));

          // Update the count down every 1 second
var that = $(this);// out side the interval
          var x = setInterval(function() {

            // Get todays date and time
            var now = new Date().getTime();

            // Find the distance between now and the count down date
            var distance = countDownDate - now;

            // Time calculations for days, hours, minutes and seconds
            var days = Math.floor(distance / (1000 * 60 * 60 * 24));
            var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
            var seconds = Math.floor((distance % (1000 * 60)) / 1000);

            // Output the result in an element with id="demo"

            document.getElementById("days").innerHTML = days;
            document.getElementById("hours").innerHTML = hours;
            document.getElementById("minutes").innerHTML = minutes;
            document.getElementById("seconds").innerHTML= seconds;

            // If the count down is over, write some text 
            if (distance < 0) {
              clearInterval(x);
              document.getElementById("clockdiv").innerHTML = "<p>" + couponExpired + "</p>";
            }

            //Works but only for 1st start date
            //var testDate = $("div .clockdiv .start").attr("rel"); //2018/09/28 17:00:00

            var startDateNew = new Date(startDate);
            var startDateNewer = new Date(startDate);
            var newOldDate = new Date(startDateNewer.setDate(startDateNew.getDate() + 7));

            //alert(startDate + ", " +  startDateNew + ", " + startDateNewer + ", " + newOldDate);

            //This works fine
            var nowDateNew = new Date().getTime();

            //alert(nowDateNew - newOldDate.getTime());

            if (days <= 7) {
              that.find('div.couponDiv').addClass("old-coupon");
            } else if ((nowDateNew - newOldDate.getTime()) < 0) {
              that.find('div.couponDiv').addClass("new-coupon");
            }
          }, 1000);
        });
      }
});

$this isn't working inside a function which is inside an .each() function

1 Answers1