带有 .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>
最佳答案
我不确定我是否理解您的 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;
});
关于javascript - 从当前行中选择下一个 "visible"同级,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36345080/