javascript - 从对象的 jQuery 集合中获取可见性

Question

我有这行代码:

var filterInputs = $(this).siblings('.filterInputs');

它对 filterInputs 执行一些工作。稍后，我想将我的 filterInputs 集合减少到仅那些可见的。

显然，我可以这样做:

var visibleFilterInputs = $(this).siblings('.filterInputs:visible');

但考虑到我已经有了对我希望减少的集合的引用，这似乎效率不高。

有没有办法这样说:

//TODO: Example
var visibleFilterInputs = $(filterInputs:visible);

无需再次遍历 DOM 树？谢谢

Answer 1

您完全正确，没有理由重新收集 DOM 元素，因为您已经在 jQuery 对象中拥有它们。所以这正是 .filter() 的内容方法适用于:http://api.jquery.com/filter/

试试这个:

var visibleFilterInputs = filterInputs.filter(":visible");

这是一个例子:http://jsfiddle.net/FC9sH/

请注意，最好针对某个 HTML 标记，例如 <div> , 使 :visible选择器效率更高一点(因为它不是 CSS 规范的一部分，并且不能通过 native 方法进行优化)。至少在您的情况下，您已经在使用 filterInputs类(class)。无论如何，也许是这样的:

var visibleFilterInputs = filterInputs.filter("div:visible");

但仅适用时。我的意思是，即使选择多个已知元素标签也可能更好:

var visibleFilterInputs = filterInputs.filter("div:visible, p:visible");