Question

我一直试图通过各种解决方案破解这个jQuery之谜，但没有成功。我有一个使用类.available和.unavailable的日历，我正在尝试创建半天。如果课程在一周的第一天没有开始，或者在一周的最后一天结束，则可以使用它，如下面的屏幕截图所示：

Calendar view on website

你可以在4月份看到它工作正常但是在5月开始的那天从那周的第一天开始，所以它不起作用。我用来实现这种效果的jQuery是这样的：

$(".datetimepicker table td.available").next("td.unavailable").addClass("start-day");
$(".datetimepicker table td.available").prev("td.unavailable").addClass("end-day");

问题是因为在表中下一个.unavailable块在下一个<tr>中，但我不确定如何检查这个，所以代码块看起来像这样：

<tr>
...
<td class="available cur-month">21</td>
</tr>
<tr>
<td class="unavailable cur-month">22</td>
...
</tr>

所以我的上面的jQuery代码无法识别该类，因为它不直接在它旁边。如果.available之后的下一个元素是.unavailable，如果它被一行分隔，怎么能找出它？

编辑：

最后，我最终废弃了这个想法并循环遍历每个td并将开始和结束日期与数组进行比较并添加相关的类。现在工作正常。

Answer 1

您可以使用.closest()选择父<tr>并使用.next/prev()选择下一个/上一个<tr>并使用.find()

$(".datetimepicker table td.available").closest('tr').next('tr').find("td.unavailable").addClass("start-day");
$(".datetimepicker table td.available").closest('tr').prev('tr').find("td.unavailable").addClass("end-day");

如何使用表

1 个答案: