jqueryif-statementaddclass

Adding a class to a specific item that is true to an if statement but has the same class as other elements


I am making a scholarship website for my school and I am wanting to add a class to the scholarships if the scholarship due date has passed. Each scholarship has the class .month.

HTML

<li class="month 11 start" data-due-date="11/11/2014 1:00">
    <time class="cbp_tmtime"><span>Nov. 11, 2014</span></time>
    <div class="cbp_tmicon"></div>
    <div class="cbp_tmlabel">
        <h2>November</h2>
        <p>Text</p>
        <br>
        <a href="#">Website</a> | <a href="#">PDF</a>
    </div>
</li>

<li class="month 12 start" data-due-date="12/11/2014 1:00">
    <time class="cbp_tmtime"><span>Dec. 11, 2014</span></time>
    <div class="cbp_tmicon"></div>
    <div class="cbp_tmlabel">
        <h2>December</h2>
        <p>Text</p>
        <br>
        <a href="#">Website</a> | <a href="#">PDF</a>
    </div>
</li>

Jquery

function getData(){
     var scholarship = $('.month');
     var data = $(scholarship).data("due-date");
     var dataDate = new Date(data);
     var today = new Date();


     if(dataDate < today){

     }

} 

I have looked for days for ways to do this but i couldn't figure it out. This is as far as i got. Please help :/ this has been irritating me like crazy. Thank you!


Solution

  • You need to do the testing for each .month element

    function getData(){
         var scholarships = $('.month'),
             today = new Date();
    
         scholarships.each(function(){
             var scholarship = $(this),
                 data = scholarship.data("due-date"),
                 dataDate = new Date(data);
    
             if(dataDate < today){
                 scholarship.addClass('expired');
             }
         });
    }