用jQuery高效地查找下一个可见的表格行
问题描述:
在隐藏了一些行的表格中,我想获取下一个可见的行(如果存在)。这将完成这项工作:用jQuery高效地查找下一个可见的表格行
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的方法,我可以使用。
答
如果您只想要一行,您为什么使用.nextAll
?
我认为,如果要更换
row = $(selectedRow).nextAll(':visible');
与
row = $(selectedRow).nextUntil(':visible').next();
你会得到你正在寻找速度的提高。
答
基于从mblase75了有益的建议,这里是最好的解决方法,我发现:
var row = $(selectedRow).next(':visible');
if ($(row).length == 0)
row = $(selectedRow).nextUntil(':visible').last().next();
if ($(row).length > 0)
selectedRow = row;
经常有(在我的情况),该表没有被过滤,所以下一行是可见大部分时间。如果不是,nextUntil()会生成一组非可见行。选择该集合中的最后一行,然后选择它后面的下一行给出表格中的下一个可见行(如果有的话)。
答
刚刚遇到完全相同的情况。根据马歇尔Morrise的答案,如果你想要一个班轮,你可以试试...
selectedRow = $(selectedRow).nextUntil(':visible').add(selectedRow).last().next();
这里的新位是阻止我们试图找到一个空的jQuery元素的next()
的.add(selectedRow)
。如果在马歇尔的帖子中只剩下剩下的问题 - 不幸的是空的jQuery元素仍然是真的。
答
有两个问题与其他的答案中提到一个-liners:
- 他们错过时,有没有隐形行的情况。在这种情况下,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();
}
}
答
一个短变异是写:如果没有可见的元素,以及特定的元素,否则
$(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")
感谢您的答复。问题是$(selectedRow).next(':visible')首先应用.next(),然后给我下一行,如果它是可见的。如果它不可见,我什么也得不到。 – 2011-12-13 20:20:50