Question

If I have a 7 day calendar with a DIV and UL for each day, how can I add the class of “today” to the LI “day” for the day of the week? (i.e. Monday, Tuesday, Wednesday, etc.)

Basically I just want to highlight the day of the week on the page load.

I assume this can be accomplished with jQuery, but I am just getting the hang of it, so any suggestions to point me in the right direction would be greatly appreciated.

Here is the basic HTML I am using for the content:

  <div id="main_content">
   <div id="weekly_schedule">
     <ul class="day_container">
       <li class="day">Su</li>
       <li class="day_content">content</li>
     </ul>
     <ul class="day_container">
       <li class="day">Mo</li>
       <li class="day_content">content</li>
     </ul>
     <ul class="day_container">
       <li class="day">Tu</li>
       <li class="day_content">content</li>
     </ul>
     <ul class="day_container">
       <li class="day">We</li>
       <li class="day_content">content</li>
     </ul>
     <ul class="day_container">
       <li class="day">Th</li>
       <li class="day_content">content</li>
     </ul>
     <ul class="day_container">
       <li class="day">Fr</li>
       <li class="day_content">content</li>
     </ul>
     <ul class="day_container">
       <li class="day">Sa</li>
       <li class="day_content">content</li>
     </ul>
  </div>
</div>

Answer 1

You may try something like the following:

$('li.day:eq(' + new Date().getDay() + ')').addClass('today');