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;

速度要快得多，但我必须使用优雅的全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

刚遇到完全相同的情况。根据Marshall Morrise的回答，如果你想要一个单行，你可以试试......

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

这里的新位是.add(selectedRow)，它阻止我们尝试找到空jQuery元素的next()。只剩下问题是在Marshall的帖子中的最后一个 - 不幸的是，一个空的jQuery元素仍然是真的。

Answer 3

如果您只想要一行，为什么要使用.nextAll？

我认为如果你更换

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

与

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

你会得到你正在寻找的速度提升。

Answer 4

其他答案中提到的一个问题有两个问题：

当没有不可见的行时，他们会错过这种情况。在这种情况下，nextUntil不会返回任何元素。以下是解决此问题的代码。
如果您使用的是特定的类名，而不是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

这个的一个简短变体是写：

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

如果没有可见元素，则返回空匹配，否则返回特定元素。

我像这样使用它（在coffeescript中）：

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

使用jQuery有效地找到下一个可见的表行

5 个答案: