Question

I’m trying to do something with a calendar which is enclosed in a table. Basically, every day is a table cell. The today cell has a special class called… .today (quite original).

I want that, when the user clicks a day-cell it happens something. For the sake of usability I want to add a class to those days so the mouse cursor changes to a link-style.

I’ve been trying to do my best but, so far no luck.

So, for example, here are the first three weeks of May with today with the class named:

<table class="calendar">
    <tbody>
        <tr class="week0">
            <td class="day">30</td>
            <td class="day">1</td>
            <td class="day">2</td>
            <td class="day">3</td>
            <td class="day">4</td>
            <td class="day">5</td>
            <td class="day">6</td>                                                                  
        </tr>
        <tr class="week1">
            <td class="day">7</td>
            <td class="day">8</td>
            <td class="day">9</td>
            <td class="day">10</td>
            <td class="day">11</td>
            <td class="day">12</td>
            <td class="day">13</td>                                                                 
        </tr>
        <tr class="week2">
            <td class="day">14</td>
            <td class="day">15</td>
            <td class="day">16</td>
            <td class="day">17</td>
            <td class="day">18</td>
            <td class="day today">19</td>
            <td class="day">20</td>                                                                 
        </tr>               
    </tbody>
</table>

I want to select the tds from 30 (day) to 19.

Approaches taken:

• Select all days and then try to find the index of the today-cell. Fails, because a jQuery selection is not an array but an object.
• Use $.each and use a flag once today is reached. This works, but sounds really bad for performance [?]

Is there a way I’m missing?

Answer 1

Get the index of .today among all td elements and select based on that:

// Get the index of td.today among all td's
var tIndex = $(".today").index("td") + 1;

// Select all td's below (and including) .today
$("td:lt(" + tIndex + ")").css("background-color", "red");​

Demo: http://jsfiddle.net/UNXve/