Question

我使用html和jQuery设计了一个自定义日历。我想在开始日期突出显示一天的k天（比如说2天）。我日历中的可用日期是“可用”类的td。这是我正在使用的代码片段：

$(".monthly-calendar .available").hover(function() {
    $(this).toggleClass("selected");
    $(this).next(".available").toggleClass("selected");
}

不幸的是，next（）仅适用于父行。当我将鼠标悬停在一行的最后一列时，这会产生问题，在这种情况下，我只会看到一列突出显示。如何重载next（）以在后续行中选择可用的TD？

小提琴可在http://jsfiddle.net/yL573/1/上找到。请尝试在26日徘徊以查看问题。徘徊在26还应突出27或下一个'可用'td。我想概括这一点来选择k天（k> 1，在这种情况下k = 2）

Answer 1

可能是这样的吗？我为你的概念做了一个快速的小提琴

它甚至可以在不同的行上工作，即使中间的某些日子已经不可用（没有可用的课程）

http://jsfiddle.net/dP3Bk/1/

让我知道这是否是你期望它做的

归结为不使用.next()，而是使用所有<td>元素数组中元素的索引。

的javascript：

$('#tableid td.available').hover(function(){
    // mouse in
    var available = $('#tableid td.available');
    var i = available.index($(this));
    $(available[i]).add($(available[i+1])).addClass('current');
}, function(){
    // mouse out
    $('td.current').removeClass('current');
});

<强>备注如果你有很多元素，这可能会影响性能。在任何情况下，我都会在选择器前添加表格的ID，而不是与所有td.available元素一起使用。

Answer 2

简单的建议...检查元素是否是该行的第（n-1）个孩子，或者甚至是第n个孩子......如果是这种情况突出显示第n个和下一行的第一个孩子为n-第1个和第n个元素的下一行的第一个和第二个td ...例如，在10个cols的行中，我们的元素是第9个，然后是第10个，下一个第1个列是用所选类设置的....如果元素是第10个检查最后一个孩子，然后选择父母trs接下来然后它的第一个两个孩子td ....一个条件应该足够我猜...希望我有意义.....欢呼!!

jQuery next（）td跨表行

2 个答案: