JQuery .addClass to current month coupon over two separate years

Question

I am making a page with image coupons for each month of the year & I would like to highlight what coupon is current. The coupons range from May to April the following year. The page will go live from May this year.

HTML

<div id="blue-colum" class="monthly-coupon-column">
    <ul>
        <li><img class="month-offer" src="images/monthly-online-offers/coupon-may-2014.png" width="312" height="240" alt="May 2014 Coupon" /></li>
        <li><img class="month-offer" src="images/monthly-online-offers/coupon-august-2014.png" width="312" height="240" alt="August 2014 Coupon" /></li>
        <li><img class="month-offer" src="images/monthly-online-offers/coupon-november-2014.png" width="312" height="240" alt="November 2014 Coupon" /></li>
        <li><img class="month-offer" src="images/monthly-online-offers/coupon-february-2015.png" width="312" height="240" alt="February 2015 Coupon" /></li>   
    </ul>
</div>
<div id="pink-colum" class="monthly-coupon-column">
    <ul>
        <li><img class="month-offer" src="images/monthly-online-offers/coupon-june-2014.png" width="312" height="240" alt="June 2014 Coupon" /></li>
        <li><img class="month-offer" src="images/monthly-online-offers/coupon-september-2014.png" width="312" height="240" alt="September 2014 Coupon" /></li>
        <li><img class="month-offer" src="images/monthly-online-offers/coupon-december-2014.png" width="312" height="240" alt="December 2014 Coupon" /></li>
        <li><img class="month-offer" src="images/monthly-online-offers/coupon-march-2015.png" width="312" height="240" alt="March 2015 Coupon" /></li>    
    </ul>   
</div>
<div id="green-colum" class="monthly-coupon-column">
    <ul>
        <li><img class="month-offer" src="images/monthly-online-offers/coupon-july-2014.png" width="312" height="240" alt="July 2014 Coupon" /></li>
        <li><img class="month-offer" src="images/monthly-online-offers/coupon-october-2014.png" width="312" height="240" alt="October 2014 Coupon" /></li>
        <li><img class="month-offer" src="images/monthly-online-offers/coupon-january-2015.png" width="312" height="240" alt="January 2015 Coupon" /></li>
        <li><img class="month-offer" src="images/monthly-online-offers/coupon-april-2015.png" width="312" height="240" alt="April 2015 Coupon" /></li>    
    </ul>
</div>

Obviously my JQuery skills need improvement. This seems to .addClass but it is selecting the 2015 version. I am aware we have not reached May date yet.

SCRIPT

<script type="text/javascript">
     $(function () {
        var currentMonth = (new Date).getMonth();
        if (currentMonth) {
            $(".month-offer").addClass("this-month");
        }
    });
</script

CSS

.month-offer.this-month
{
    transform:scale(1.05);
}

All your current code is doing is getting the current month, then checking to see if it's a truthy value (e.g. non-zero which basically means not January) and then if so, add the `"this-month"` class to every object that matches `".month-offer"`. That is clearly not going to do anything useful. Of all your `.month-offer` objects, how do you propose to tell which one is identified with which month? Do you want to try to parse that info out of the image filename? Get it from the alt tag? Or what? — jfriend00, Apr 04 '14 at 05:21

score 1 · Answer 1 · answered Apr 04 '14 at 05:51

Try

html

<div id="blue-colum" class="monthly-coupon-column">
    <ul>
        <li><img class="month-offer" src="images/monthly-online-offers/coupon-may-2014.png" width="312" height="240" alt="2014-05 Coupon" /></li>
        <li><img class="month-offer" src="images/monthly-online-offers/coupon-august-2014.png" width="312" height="240" alt="2014-08 Coupon" /></li>
        <li><img class="month-offer" src="images/monthly-online-offers/coupon-november-2014.png" width="312" height="240" alt="2014-11 Coupon" /></li>
        <li><img class="month-offer" src="images/monthly-online-offers/coupon-february-2015.png" width="312" height="240" alt="2015-02 Coupon" /></li>   
    </ul>
</div>
<div id="pink-colum" class="monthly-coupon-column">
    <ul>
        <li><img class="month-offer" src="images/monthly-online-offers/coupon-june-2014.png" width="312" height="240" alt="2014-06 Coupon" /></li>
        <li><img class="month-offer" src="images/monthly-online-offers/coupon-september-2014.png" width="312" height="240" alt="2014-09 Coupon" /></li>
        <li><img class="month-offer" src="images/monthly-online-offers/coupon-december-2014.png" width="312" height="240" alt="2014-12 Coupon" /></li>
        <li><img class="month-offer" src="images/monthly-online-offers/coupon-march-2015.png" width="312" height="240" alt="2015-03 Coupon" /></li>    
    </ul>   
</div>
<div id="green-colum" class="monthly-coupon-column">
    <ul>
        <li><img class="month-offer" src="images/monthly-online-offers/coupon-july-2014.png" width="312" height="240" alt="2014-07 Coupon" /></li>
        <li><img class="month-offer" src="images/monthly-online-offers/coupon-october-2014.png" width="312" height="240" alt="2014-10 Coupon" /></li>
        <li><img class="month-offer" src="images/monthly-online-offers/coupon-january-2015.png" width="312" height="240" alt="2015-01 Coupon" /></li>
        <li><img class="month-offer" src="images/monthly-online-offers/coupon-april-2015.png" width="312" height="240" alt="2015-04 Coupon" /></li>    
    </ul>
</div>

js

$(function() {
    (function(month) {
      $("[alt^="+month+"]").addClass("this-month");
    })(new Date().toJSON().substr(0,7));
});

jsfiddle http://jsfiddle.net/guest271314/TaLHG/

score 0 · Answer 2 · edited May 23 '17 at 12:20

One possible way of doing this that gets the month from the alt tag is this:

function getMonthFromString(mon){
   return new Date(Date.parse(mon +" 1, 2014")).getMonth()
}

var now = new Date();
$(".month-offer").each(function() {
    // assume the first word of the alt tag is the month name
    var altWords = this.alt.split(" ");
    var yearNum = parseInt(altWords[1], 10);
    var monthNum = getMonthFromString(altWords[0]);
    if (now.getMonth() == monthNum && now.getFullYear() == yearNum) {
        $(this).addClass("this-month");
    }

});

Working demo: http://jsfiddle.net/jfriend00/g2kg6/

To explain, this code goes to each .month-offer object, gets the month and year from the alt tag, then compares that to the current month and year and if they match, it adds the this-month class to that object.

Note: see this question for the source of the getMonthFromString() function.

score 0 · Accepted Answer · answered Apr 04 '14 at 05:33

You didn't have current month and current year in the above html. Now i just changed the april year 2015 to 2014 look at the fiddle it works for month and year.

var dt = new Date();
var m = ['January', 'February', 'March', 
               'April', 'May', 'June', 'July', 
               'August', 'September', 'October', 'November', 'December'];

var month = m[dt.getMonth()]; //you get the idea...
var y = dt.getFullYear();


$(".monthly-coupon-column ul li img").each( function(i,v) { 
       var result = $(this).attr("alt").split(" ");

    if(result[0] == month && result[1] == y){
        $(this).addClass("red");
    }

});

Fiddle

This seems to work fine. I also tested version below & is working fine. Thanks everyone that helped. Any suggestions to where I should get started with JQuery scripting? Special thanks sudhar + guest271314 I will post a link to the live page once it is up. — Kerry Smyth, Apr 06 '14 at 23:17

score 0 · Answer 4 · answered Apr 04 '14 at 05:49

try something like this

     $(function () {
        var monthNames = [ "January", "February", "March", "April", "May", "June",
         "July", "August", "September", "October", "November", "December" ];

        var currentMonth = (new Date).getMonth();
        var currentYear = (new Date).getFullYear();

         $('.month-offer').each(function(){
            var alt = this.alt;
            var alt_arr = alt.split(' ');
            var m = alt_arr[0];
            var y = alt_arr[1];
            if(monthNames[currentMonth]  == m && currentYear ==y){
                $(this).addClass("this-month");
            }
        })
    });

JQuery .addClass to current month coupon over two separate years

4 Answers4