jQuery next()td跨表行

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