javascript - 基于特定参数和使用 JavaScript 包含 A 标记的 innerHTML 将类附加到 TD 标记

Question

这有点棘手，我正在寻找一个好的 JavaScript 解决方案而不修改它自己的源代码。

jQueryUI datepicker 小部件正在组成一个月份控件，在 HTML 中看起来像这样：

<div id="mjcEvents_pJuiCalendar"><div class="UC_JuiCalendar Panel datepicker hasDatepicker"><div class="ui-datepicker-inline ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" style="display: block;">
<div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all"><a class="ui-datepicker-prev ui-corner-all" data-handler="prev" data-event="click" title="Prev"><span class="ui-icon ui-icon-circle-triangle-w">Prev</span></a><div class="ui-datepicker-title"><span class="ui-datepicker-month">Juni-Events</span>&nbsp;<span class="ui-datepicker-year">2013</span></div>
</div>
<table class="ui-datepicker-calendar">
    <thead>
        <tr>
            <th class="ui-datepicker-week-col">W</th>
            <th><span title="Monday">M</span></th>
            <th><span title="Tuesday">D</span></th>
            <th><span title="Wednesday">M</span></th>
            <th><span title="Thursday">D</span></th>
            <th><span title="Friday">F</span></th>
            <th class="ui-datepicker-week-end"><span title="Saturday">S</span></th>
            <th class="ui-datepicker-week-end"><span title="Sunday">S</span></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="ui-datepicker-week-col">22</td>
            <td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled "><span class="ui-state-default">27</span></td>
            <td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled "><span class="ui-state-default">28</span></td>
            <td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled "><span class="ui-state-default">29</span></td>
            <td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled "><span class="ui-state-default">30</span></td>
            <td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled "><span class="ui-state-default">31</span></td>
            <td class=" ui-datepicker-week-end  ui-datepicker-today" data-handler="selectDay" data-event="click" data-month="5" data-year="2013"><a class="ui-state-default ui-state-highlight" href="#">1</a></td>
            <td class=" ui-datepicker-week-end ui-datepicker-days-cell-over  ui-datepicker-current-day" data-handler="selectDay" data-event="click" data-month="5" data-year="2013"><a class="ui-state-default" href="#">2</a></td>
        </tr>
        <tr>
            <td class="ui-datepicker-week-col">23</td>
            <td class=" " data-handler="selectDay" data-event="click" data-month="5" data-year="2013"><a class="ui-state-default" href="#">3</a></td>
            <td class=" " data-handler="selectDay" data-event="click" data-month="5" data-year="2013"><a class="ui-state-default" href="#">4</a></td>
            <td class=" " data-handler="selectDay" data-event="click" data-month="5" data-year="2013"><a class="ui-state-default" href="#">5</a></td>
            <td class=" " data-handler="selectDay" data-event="click" data-month="5" data-year="2013"><a class="ui-state-default" href="#">6</a></td>
            <td class=" " data-handler="selectDay" data-event="click" data-month="5" data-year="2013"><a class="ui-state-default" href="#">7</a></td>
            <td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="5" data-year="2013"><a class="ui-state-default" href="#">8</a></td>
            <td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="5" data-year="2013"><a class="ui-state-default" href="#">9</a></td>
        </tr>
        <tr>
            <td class="ui-datepicker-week-col">24</td>
            <td class=" " data-handler="selectDay" data-event="click" data-month="5" data-year="2013"><a class="ui-state-default" href="#">10</a></td>
            <td class=" " data-handler="selectDay" data-event="click" data-month="5" data-year="2013"><a class="ui-state-default" href="#">11</a></td>
            <td class=" " data-handler="selectDay" data-event="click" data-month="5" data-year="2013"><a class="ui-state-default" href="#">12</a></td>
            <td class=" " data-handler="selectDay" data-event="click" data-month="5" data-year="2013"><a class="ui-state-default" href="#">13</a></td>
            <td class=" " data-handler="selectDay" data-event="click" data-month="5" data-year="2013"><a class="ui-state-default" href="#">14</a></td>
            <td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="5" data-year="2013"><a class="ui-state-default" href="#">15</a></td>
            <td class=" ui-datepicker-week-end ui-datepicker-unselectable ui-state-disabled "><span class="ui-state-default">16</span></td>
        </tr>
        <tr>
            <td class="ui-datepicker-week-col">25</td>
            <td class=" ui-datepicker-unselectable ui-state-disabled "><span class="ui-state-default">17</span></td>
            <td class=" ui-datepicker-unselectable ui-state-disabled "><span class="ui-state-default">18</span></td>
            <td class=" ui-datepicker-unselectable ui-state-disabled "><span class="ui-state-default">19</span></td>
            <td class=" ui-datepicker-unselectable ui-state-disabled "><span class="ui-state-default">20</span></td>
            <td class=" ui-datepicker-unselectable ui-state-disabled "><span class="ui-state-default">21</span></td>
            <td class=" ui-datepicker-week-end ui-datepicker-unselectable ui-state-disabled "><span class="ui-state-default">22</span></td>
            <td class=" ui-datepicker-week-end ui-datepicker-unselectable ui-state-disabled "><span class="ui-state-default">23</span></td>
        </tr>
        <tr>
            <td class="ui-datepicker-week-col">26</td>
            <td class=" ui-datepicker-unselectable ui-state-disabled "><span class="ui-state-default">24</span></td>
            <td class=" ui-datepicker-unselectable ui-state-disabled "><span class="ui-state-default">25</span></td>
            <td class=" ui-datepicker-unselectable ui-state-disabled "><span class="ui-state-default">26</span></td>
            <td class=" ui-datepicker-unselectable ui-state-disabled "><span class="ui-state-default">27</span></td>
            <td class=" ui-datepicker-unselectable ui-state-disabled "><span class="ui-state-default">28</span></td>
            <td class=" ui-datepicker-week-end ui-datepicker-unselectable ui-state-disabled "><span class="ui-state-default">29</span></td>
            <td class=" ui-datepicker-week-end ui-datepicker-unselectable ui-state-disabled "><span class="ui-state-default">30</span></td>
        </tr>
    </tbody>
</table>

现在我想通过提供日期来访问特定的 TD 标签，它应该尽可能快地跳过其他月份的情况，所以每次我更改月份时都会调用它几次（等于天的情况）。

所有重要的 TD 标签都有一个 A 标签，包括。其他可以忽略，因为它们不在特定月份。

所以我需要一个功能，markEvent(parentSelector, year, month, day)即。markEvent($('#mjcEvents_pJuiCalendar'), 2013, 5, 7);这将附加一个新类isEvent，如<td class=" " data-handler="selectDay" data-event="click" data-month="5" data-year="2013"><a class="ui-state-default" href="#">7</a></td>. 如您所见，在我的情况下使用 jQuery 非常好。

谢谢你的建议。