从当前行

Question

使用.next（）jquery方法的小选择器让我发疯。

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

 <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/