javascript - 从当前行中选择下一个 "visible"同级

Question

带有 .next() jquery 方法的小选择器让我发疯。

故事是这样的，我在表行上使用 Bootstrap 过滤器和 jquery。当过滤器执行时，它会将显示样式属性更改为 table-row，如下所示:

 <tr class="activated" style="display: table-row;">

现在我想要从 Jquery 得到的就是，从当前 TR 中选择下一个可用的 TR，它具有 display = table-row。

我尝试过以下方法:

$(getSelectedRow()).next(":not(:hidden)") returns []

$(getSelectedRow()).next(":visible") returns[]

$(getSelectedRow()).next("tr[display==visible]") returns []

我想使用下一个，因为我想要下一个第一个兄弟。

这是 HTML

<table class="table table-hover navigateable focused" id="bookmarkTable">
        <thead>
            <tr>
                <th class="text-center">Bookmarks</th>
            </tr>
        </thead>
        <tbody class="searchable" id="bookMarkResultGridView">
            <tr class="activated" style="display: none;">
                <td class="word-wrap" data-rowindex="0" data-tabid="0"
                data-url="http://gitready.com/" style="cursor: pointer;">git
                ready » learn git one commit at a time<br>
                <small class=
                "text-muted word-wrap">http://gitready.com/</small></td>
            </tr>
            <tr class="activated" style="display: none;">
                <td class="word-wrap" data-rowindex="1" data-tabid="0"
                data-url="http://inthecheesefactory.com/blog/android-design-support-library-codelab/en"
                style="cursor: pointer;">Codelab for Android Design Support
                Library used in I/O Rewind Bangkok session :: The Cheese
                Factory<br>
                <small class=
                "text-muted word-wrap">http://inthecheesefactory.com/blog/android-design-support-library-codelab/en</small></td>
            </tr>
            <tr class="activated" style="display: none;">
                <td class="word-wrap" data-rowindex="2" data-tabid="0"
                data-url="https://github.com/rogerta/secrets-for-android"
                style="cursor: pointer;">Store your all Password in Android
                App<br>
                <small class=
                "text-muted word-wrap">https://github.com/rogerta/secrets-for-android</small></td>
            </tr>
            <tr class="activated" style="display: table-row;">
                <td class="word-wrap" data-rowindex="3" data-tabid="0"
                data-url="https://guides.codepath.com/android/Google-Play-Style-Tabs-using-TabLayout#design-support-library"
                style="cursor: pointer;">Google Play Style Tabs using TabLayout
                | CodePath Android Cliffnotes<br>
                <small class=
                "text-muted word-wrap">https://guides.codepath.com/android/Google-Play-Style-Tabs-using-TabLayout#design-support-library</small></td>
            </tr>
        </tbody>
    </table>

Answer 1

我不确定我是否理解您的 getSelectedRow() 但如果它可以与某些类选择器交换(在本例中我使用 .selected)，并且您只需要第一个未隐藏的下一个兄弟，这将是您的解决方案:

$(".selected~tr:not(':hidden')").first();

https://jsfiddle.net/r3f22uzn/

我不确定为什么这不起作用:

$(getSelectedRow()).find("~tr:not(':hidden')").first();

但这应该有效:

$(getSelectedRow()).find("~tr:not(':hidden')").each(function(){
    // first element
    $(this).css("background", "black")
    return false;
    });

https://jsfiddle.net/r3f22uzn/3/