jQuery next () td по строкам таблицы - PullRequest
Новая
       9

jQuery next () td по строкам таблицы

2 голосов
/ 21 ноября 2011

Я разработал собственный календарь, используя 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 или следующий «доступный» тд.Я хочу обобщить это для выбора k дней (k> 1, в этом случае k = 2)

Ответы [ 2 ]

6 голосов
/ 21 ноября 2011

это может быть что-то вроде этого? я сделал быстрый 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');
});

примечание если у вас много элементов, это может быть ударом по производительности. в любом случае, я бы добавил идентификатор таблицы перед вашими селекторами, чтобы не работать со всеми элементами td.available.

0 голосов
/ 21 ноября 2011

скромное предложение ... проверьте, является ли элемент (n-1) -ым дочерним элементом строки или даже n-ным дочерним элементом ... если это так, выделите n-й и первый дочерний элемент следующей строки для n-1 и первый и второй td следующей строки для n-го элемента ... например, в строке из 10 столбцов наш элемент будет 9-м, а затем 10-м, а в следующих строках 1-й столбец будет установлен выбранный класс .... если элемент 10-йпроверьте последний дочерний элемент и выберите следующий родительский элемент trs, а затем его первые два дочерних элемента td .... условное выражение должно быть достаточным, я думаю ... надеюсь, что оно имело смысл ..... ура !!

...