2

テーブルに囲まれたカレンダーで何かをしようとしています。基本的に、毎日が表のセルです。今日のセルには...と呼ばれる特別なクラスがあります.today（非常に独創的です）。

ユーザーが日セルをクリックすると、何かが起こります。使いやすさのために、マウスカーソルがリンクスタイルに変わるように、当時のクラスを追加したいと思います。

私は最善を尽くしてきましたが、今のところ運がありません。

たとえば、5 月の最初の 3 週間と今日のクラス名は次のとおりです。

<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>

30 (日) から 19 までの tds を選択したい。

取られたアプローチ:

  • すべての日を選択してから、today-cell のインデックスを見つけようとします。jQuery の選択は配列ではなくオブジェクトであるため、失敗します。
  • 到達$.eachしたらフラグを使用して使用します。todayこれは機能しますが、パフォーマンスが非常に悪いように聞こえます [?]

私が行方不明になっている方法はありますか？

4

1 に答える 1

1

.todayすべての要素のインデックスを取得し、tdそれに基づいて選択します。

// 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");​

デモ: http://jsfiddle.net/UNXve/

于 2012-05-18T23:20:35.537 に答える