jQuery:确定容器中至少有一个子项是否可见的最快方法

Question

什么是确定是否至少有一个孩子最快捷的方式div在一个div容器是可见的？

我一直在用这个:

if ($this.children('div:visible').length) {...

但它很慢,因为它检查所有的孩子(其中有很多).

我猜最快的方法会在找到第一个可见元素后立即停止搜索,但无论什么是最快的胜利:)

BTW:

我的实际情况是一个主要的容器,包含大约100个小容器,每个容器包含多达100个元素.我想确定哪些小容器至少有一个可见元素.底部的元素被隐藏并由各种类显示.

谢谢.

Answer 1

此页面上所有方法的JSPerf

• 所有可见元素:http://jsperf.com/jquery-quickest-visible-check/3
• 所有隐藏的元素:http://jsperf.com/jquery-quickest-visible-check/2
  建议的替代方法使用.each()和.is(':visible')是最慢的方法.在所有元素都可见的情况下,我/ qwertymk的方法比OPs解决方案更快.但是,当隐藏所有元素时,原始方法似乎是最佳的.

编辑:我的原始方法更快的原因是它使用.find('>' + selector),.children()必须使用的地方(循环遍历所有子节点,并检查元素是否匹配选择器).

由于div是本机支持的选择器,并且测试用例不包含深层嵌套元素,因此我的解决方案变得非常快.但在规范化之后,它看起来几乎等于qwertymks解决方案.这两个解决方案的JSPerf将显示他的解决方案稍微快一点,因为它只有一个较少的函数调用.

此页面上的解决方案是通用的:下面的代码可以针对特定情况进行优化(例如选择器只是一个标记):http://jsfiddle.net/kFZJs/

要加快进度,请拆分选择器,因为:visible它不是本机CSS选择器.

首选解决方案应尽可能少使用jQuery,因为所需的解决方案必须具有高性能.为此,请检查逻辑:visible.

原始功能包含jQuery.support.reliableHiddenOffsets.当您的孩子不是表格单元格(仅在IE8中使用)时,可以安全地剥离它以支持性能.

现在,编写一个jQuery插件(它并不昂贵):

 (function($) {
     $.fn.hasAtLeastOneVisibleChild = function(selector) {
         var $col = this.children(selector), i, elem;
         for (i=0; i<$col.length; i++) {
             var elem = $col[i];
             if (elem.offsetWidth !== 0 || elem.offsetHeight !== 0) {
                 return true;
             }
         }
         return false;
     };
 })(jQuery);
 // Usage:
 $this.hasAtLeastOneVisibleChild('div'); // True or false