Question

我正在尝试做的是我使用日期选择器，并将可预订的日期与.bookable类和不可预订的日期一起使用.non_bookable类如下：

    <tr>
   <td class=" ui-datepicker-unselectable ui-state-disabled not_bookable" title="This date is unavailable"><span class="ui-state-default">7</span></td>
   <td class=" ui-datepicker-unselectable ui-state-disabled not_bookable" title="This date is unavailable"><span class="ui-state-default">8</span></td>
   <td class=" ui-datepicker-unselectable ui-state-disabled not_bookable" title="This date is unavailable"><span class="ui-state-default">9</span></td>
   <td class=" ui-datepicker-unselectable ui-state-disabled not_bookable" title="This date is unavailable"><span class="ui-state-default">10</span></td>
   <td class=" ui-datepicker-unselectable ui-state-disabled not_bookable" title="This date is unavailable"><span class="ui-state-default">11</span></td>
   <td class=" ui-datepicker-week-end ui-datepicker-unselectable ui-state-disabled not_bookable" title="This date is unavailable"><span class="ui-state-default">12</span></td>
   <td class="ui-datepicker-week-end ui-datepicker-days-cell-over bookable" title="This date is available" data-handler="selectDay" data-event="click" data-month="10" data-year="2016"><a class="ui-state-default ui-state-active" href="#">13</a></td>
</tr>

我要做的是在具有.bookable类的那个之后用.non_bookable类选择接下来的7个元素。

我正在尝试选择下一个（在我尝试下一个7之前！）但似乎无法做到这一点，我相信因为它在一个级别和下一个标签中。我正在使用的代码是：

<script type="text/javascript">

jQuery( document ).ready(function() {

    jQuery('tr .bookable').closest('tr .not_bookable').css('background','green');
});

我在jsfiddle.net/jmkqza5f/2

中完整地提供了所有代码

提前感谢您的帮助。

更新 - 正如您将在小提琴上看到的那样，它将样式应用于前面的元素而不是下一个元素。

Answer 1

试试这个：

jQuery( document ).ready(function() {

        jQuery('tr .bookable').closest('tr').next().find('.not_bookable').css('background','green');
    });

Answer 2

这会奏效。设置当前代码的方式是寻找最近的表行，在本例中是父元素。

jQuery( document ).ready(function() {

    jQuery('tr .bookable').parents('tr').next('tr').find('.not_bookable').css('background','green');
});

Answer 3

您的问题是一个简单的选择器问题。我将提出一个可以帮助你更好的替代解决方案。您最有可能使用jQuery Datepicker方法beforeShowDate生成这些类。我建议延长之前的显示日期以添加另一个类。因此，而不是＆＃34;可预订＆＃34;和＆＃34; not_bookable＆＃34;还有一个额外的课程＆＃34; recent_booked＆＃34;。然后，您可以在之前添加这些类的相同位置执行逻辑。

jQuery - 需要用class选择接下来的7个元素

3 个答案: