Question

我正在处理一个奇怪的问题，即jQuery的.is(':hidden')返回true一个围绕明显可见内容的元素。请参阅此fiddle中的问题。

:hidden伪检查offsetWidth和offsetHeight，在这种情况下实际报告为0.

根本原因似乎是标记错误：DIV嵌套在SPAN内。不幸的是，这个例子在脚本需要操作的几个大型站点上的标记减少了。没有机会改变标记。

关于如何在现实世界中滥用标记而获得可靠:hidden实施的任何想法？这个问题不是关于修复jQuery，而是关于强大的可见性检查的逻辑，因为现实世界的HTML经常被破坏。

更新：

根据接受的答案，在CSS不用于根本改变定位的情况下，添加getBoundingClientRect检查会使.is(':hidden')更加健壮，例如，

function isHiddenSubtree($node) {
  if ($node.is(':hidden')) {
    var rect = $node.get(0).getBoundingClientRect();
    return rect.width === 0 && rect.height === 0;
  } else {
    return false;
  }
}

但是，如this fiddle所示，在浮动或定位元素的情况下，这将失败。

Answer 1

没关系，它是隐藏的：

在此上下文中，元素div不允许作为元素跨度的子元素。（抑制此子树中的更多错误。）

Span是内联元素。在HTML5 parser标记中没有将block element设置为inline element。但computation engine不是HTML5 parser。它适用于正确的标记。

什么是computation engine？例如，在任何大型网站的devtool栏中打开timeline，并在任何ajax操作上获取computation layers消息。也就是说，此引擎计算/重新计算DOM偏移量和大小。

修改

getBoundingClientRect()不返回任何零尺寸。但它的工作原理如下：

将节点克隆为抽象沙箱

计算需要应用节点的所有样式

然后申请

计算尺寸

所以getBoundingClientRect做了许多不必要的操作。

Answer 2

jquery报告：隐藏如果元素的宽度和高度为0，则＆lt; span＆gt;

就是这种情况

这意味着如果元素的CSS显示为“none”，或者其任何父/祖先元素的显示为“none”，或者元素的宽度为0且元素的高度为0，则元素将报告为隐藏。

请参阅jQuery Release Notes for v1.3.2

您应该检查＆lt; div＆gt;的可见性并删除周围的＆lt; span＆gt; （见Pinal的答案）

更强大的jQuery：隐藏的实现

2 个答案: