jQuery next() 跨表行的 td

Question

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

$(".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

谦虚的建议...检查元素是否是该行的第 (n-1) 个子元素，甚至是第 n 个子元素...如果是这种情况，则突出显示下一行的第 n 个子元素和第一个子元素为 n- 1 和第 n 个元素的下一行的第一个和第二个 td...例如在一行 10 列中，我们的元素是第 9 个然后第 10 个，接下来的行第 1 列要设置为所选类....如果元素是第 10 个检查最后一个孩子，然后选择父母 trs 下一个，然后选择它的第一个两个孩子 td....一个条件应该就足够了我猜...希望我说得通.....干杯！！

Answer 2

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

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

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 元素。