Question

I have the following markup:

<div class="calendar">
    <div class="heading">
        <a class="previous-month" href="javascript:;"></a>
        <h1 class="hmc">February&nbsp;2012</h1>
        <a class="next-month" href="javascript:;"></a>
    </div>

    <ul class="week hmc">
        <li>Su</li>
        <li>Mo</li>
        <li>Tu</li>
        <li>We</li>
        <li>Th</li>
        <li>Fr</li>
        <li>Sa</li>
    </ul>

    <ul class="january days hmc current">
        <li>&nbsp;</li>
        <li>&nbsp;</li>
        <li>&nbsp;</li>
        <li><a href="javascript:;">1</a></li>
        <li><a href="javascript:;">2</a></li>
        <li><a href="javascript:;">3</a></li>
        <li><a href="javascript:;">4</a></li>
        <li><a href="javascript:;">5</a></li>
        <li><a href="javascript:;">6</a></li>
        <li><a href="javascript:;">7</a></li>
        <li><a href="javascript:;">8</a></li>
        <li><a href="javascript:;">9</a></li>
        <li><a href="javascript:;">10</a></li>
        <li><a href="javascript:;">11</a></li>
        <li><a href="javascript:;">12</a></li>
        <li><a href="javascript:;">13</a></li>
        <li><a href="javascript:;">14</a></li>
        <li><a href="javascript:;">15</a></li>
        <li><a href="javascript:;">16</a></li>
        <li><a href="javascript:;">17</a></li>
        <li><a href="javascript:;">18</a></li>
        <li><a href="javascript:;">19</a></li>
        <li><a href="javascript:;">20</a></li>
        <li><a href="javascript:;">21</a></li>
        <li><a href="javascript:;">22</a></li>
        <li><a href="javascript:;">23</a></li>
        <li><a href="javascript:;">24</a></li>
        <li><a href="javascript:;">25</a></li>
        <li><a href="javascript:;">26</a></li>
        <li><a href="javascript:;">27</a></li>
        <li><a class="alt current" href="javascript:;">28</a></li>
        <li><a href="javascript:;">29</a></li>
        <li>&nbsp;</li>
        <li>&nbsp;</li>
        <li>&nbsp;</li>
    </ul>
</div>

Here I generate a calendar. I want to highlight the current day I am clicking on. I have tried:

$('body').on('click', '.january > li > a', function() {             
    $(this).closest('.january').children('li').each(function() {
        var anchor = $(this).children('a');
        anchor.addClass('alt current');
    )}
)}

But it doesn’t work. Also I want to select the value of the item I am clicking on, e.g. the day

Answer 1

The traversal you are doing with each(), closest() and children() isn’t necessary, try this:

$('body').on('click', '.january > li > a', function() {
    $(".january > li > a").removeClass("alt current");            
    $(this).addClass('alt current');
});