Эффективно найти следующую видимую строку таблицы с помощью jQuery

Question

В таблице с несколькими скрытыми строками я хочу получить следующую видимую строку, если она существует.Это сделает работу:

row = $(selectedRow).nextAll(':visible');
if ($(row).length > 0)
    selectedRow = row;

, но это очень медленно, когда много строк следуют за выбранной строкой.Подход с использованием сценариев:

var row = $(selectedRow).next();
while ($(row).length > 0 && !$(row).is(':visible'))
    row = $(row).next();
if ($(row).length > 0)
    selectedRow = row;

Это намного быстрее, но должен быть элегантный подход all-jQuery, который я могу использовать.

Answer 1

Основываясь на полезном предложении mblase75, вот наиболее элегантное решение, которое я нашел:

var row = $(selectedRow).next(':visible');

if ($(row).length == 0)
    row = $(selectedRow).nextUntil(':visible').last().next();

if ($(row).length > 0)
    selectedRow = row;

Часто (в моем случае) таблица не фильтруется, поэтому следующая строкавидна большую часть времени.Если это не так, nextUntil () возвращает непустой набор невидимых строк.Выбор последней строки в этом наборе, а затем следующей следующей за ней строки дает следующую видимую строку в таблице, если она есть.

Answer 2

Просто столкнулся с точно такой же ситуацией.Основываясь на ответе Маршалла Морриса, если вы хотите однострочно, вы можете попробовать ...

selectedRow = $(selectedRow).nextUntil(':visible').add(selectedRow).last().next();

Новый бит здесь - .add(selectedRow), который не дает нам попытаться найти next()пустой элемент jQuery.Единственная оставшаяся проблема - последняя, ​​если в посте Маршалла - к сожалению, пустой элемент jQuery все еще правдив.

Answer 3

Одним из коротких вариантов этого является запись:

$(element).nextAll().filter(":visible:first")

Это вернет пустое совпадение, если нет видимых элементов, и конкретный элемент в противном случае.

Я использую его какэто (в кофейном тексте):

$(input_element).on "keydown", (e) ->
    if e.which == 40  # Down key
        new_selected = $(selected_element).nextAll().filter(":visible:first")
        if new_selected.length
            $(selected_element).removeClass("selected")
            new_selected.addClass("selected")

    if e.which == 38  # Up key
        new_selected = $(selected_element).prevAll().filter(":visible:first")
        if new_selected.length
            $(selected_element).removeClass("selected")
            new_selected.addClass("selected")

Answer 4

Есть две проблемы с однострочными, упомянутыми в других ответах:

1. Они пропускают случай, когда нет невидимых строк.В этом случае nextUntil не возвращает никаких элементов.Ниже приведен код, который устраняет эту проблему.
2. Если вы используете определенное имя класса вместо стандартного отображения / скрытия jQuery, то оно также не работает надежно.

Ниже код исправляет обе вышеупомянутые проблемы с другими ответами:

//invisibleRowClassName parameter is optional
function nextVisibleSibling(element, invisibleRowClassName) {
    var selector = invisibleRowClassName ? (":not(." + invisibleRowClassName + ")") : ".visible";
    var invisibleElements = element.nextUntil(selector);
    if (invisibleElements.length === 0) {
        return element.next();
    }
    else {
        return invisibleElements.last().next();
    }
}

И вот код, чтобы получить также предыдущий видимый элемент.

//invisibleRowClassName parameter is optional
function prevVisibleSibling(element, invisibleRowClassName) {
    var selector = invisibleRowClassName ? (":not(." + invisibleRowClassName + ")") : ".visible";
    var invisibleElements = element.prevUntil(selector);
    if (invisibleElements.length === 0) {
        return element.prev();
    }
    else {
        return invisibleElements.last().prev();
    }
}

Answer 5

Почему вы используете .nextAll, если вам нужен только один ряд?

Я думаю, что если вы замените

row = $(selectedRow).nextAll(':visible');

на

row = $(selectedRow).nextUntil(':visible').next();

you 'получите улучшение скорости, которое вы ищете.