jQuery next() td across table rows

Question

我使用html和jQuery设计了一个自定义日历。我想在开始日期上突出显示k天(比如2天)的范围。在我的日历中，可用日期是"可用"类的一部分。这是我正在使用的代码片段:

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

遗憾的是，next()只适用于父行。这产生了一个问题，当我悬停在一行的最后一列，在这种情况下，我只看到1列突出显示。如何重载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，突出显示下一行的第一个和第二个td对于第n个元素…例如，在一行10种颜色中，我们的元素是第9行，然后是第10行，接下来的第1列将使用所选类....进行设置如果元素是第10个，检查最后一个子元素，然后选择父元素TRS，然后选择前两个子元素TRS ....我想条件句应该足够了……希望我说的有意义.....干杯!!