jquery this refer to class in if statement

Question

I have several divs that contain a date inside of them in a p tag. I want only those divs that display the current date to display.

Example HTML:

<div class="box">
  <p class="date">2013/12/18</p>
</div>
<div class="box">
  <p class="date">2013/12/19</p>
</div>
<div class="box">
  <p class="date">2013/12/20</p>
</div>

Here is the javascript that I have right now, and it is not working.

$(document).ready(function(){
    var d = new Date();

    var month = d.getMonth()+1;
    var day = d.getDate();

    var date = d.getFullYear() + '/' +
        ((''+month).length<2 ? '0' : '') + month + '/' +
        ((''+day).length<2 ? '0' : '') + day;

    if($('.date').html() == date){
        $(this).parent().css('display', 'block');
    }
});

The code gets into the if statement, but the .css() line isn't working. Any suggestions on why this isnt working and how to fix it?

Answer 1

In the body of the function $(document).ready, the value of this is not your .date element

Replace

if($('.date').html() == date){
    $(this).parent().css('display', 'block');
}

with

$('.date').each(function() {
    if ($(this).html() == date) {
        $(this).parent().css('display', 'block');
    }
});

In this second portion of code, you are in the body of the .each() function: this represents your element with class date