如何检查jQuery中是否隐藏了元素？

1个
2
下一个
由于问题涉及单个元素，因此此代码可能更合适：
//检查CSS内容是否显示：[none | block]，忽略可见性：[true | false]
$（element）.is（“：visible”）;
//与隐藏相同
$（element）.is（“：hidden”）;
它与twernt的建议相同，但适用于单个元素。它与jQuery FAQ中推荐的算法匹配。
我们使用jQuery的is（）来与另一个元素，选择器或任何jQuery对象一起检查所选元素。此方法遍历DOM元素以找到匹配项，该匹配项满足传递的参数。如果存在匹配项，则返回true，否则返回false。
|
您可以使用隐藏的选择器：
//匹配所有隐藏的元素
$（'element：hidden'）
和可见的选择器：
//匹配所有可见的元素
$（'element：visible'）
|
if（$（element）.css（'display'）=='none'|| $（element）.css（“ visibility”）==“隐藏”）{
//'element'被隐藏
}
上面的方法没有考虑父级的可见性。要同时考虑父级，则应使用.is（“：hidden”）或.is（“：visible”）。
例如，

 Div2 

上面的方法将div2可见，而：visible不可见。但是以上内容在许多情况下可能很有用，尤其是当您需要查找隐藏的父级中是否有任何可见的错误div时，因为在这种情况下：visible无效。
|
这些答案都没有解决我所理解的问题，即我正在寻找的问题：“如何处理具有可见性的项目：隐藏？”。 ：visible和：hidden都不会处理这个问题，因为它们都希望根据文档进行显示。据我所确定，没有选择器来处理CSS可见性。这是我的解决方法（标准jQuery选择器，可能会有更简洁的语法）：
$（“。item”）。each（function（）{
如果（$（this）.css（“ visibility”）==“ hidden”）{
//处理不可见状态
}其他{
//处理可见状态
}
}）;
|
如何确定切换元素的状态？
您可以使用：visible和：hidden选择器来确定元素是否折叠。
var isVisible = $（'＃myDiv'）。is（'：visible'）;
var isHidden = $（'＃myDiv'）。is（'：hidden'）;
如果仅基于元素的可见性对其进行操作，则可以在选择器表达式中包括：visible或：hidden。例如：
$（'＃myDiv：visible'）。animate（{left：'+ = 200px'}，'slow'）;
|
通常，当检查是否可见时，您将立即前进并对其进行其他处理。 jQuery链接使此操作变得容易。
因此，如果您有一个选择器，并且只想在可见或隐藏的情况下对其执行某些操作，则可以使用filter（“：visible”）或filter（“：hidden”），然后将其与您想要的操作链接起来采取。
因此，代替if语句，像这样：
如果（$（'＃btnUpdate'）。is（“：visible”））
{
$（'＃btnUpdate'）。animate（{width：“ toggle”}）; //隐藏按钮
}
或更有效，但更难看：
var button = $（'＃btnUpdate'）;
如果（button.is（“：visible”））
{
button.animate（{width：“ toggle”}）; //隐藏按钮
}
您可以在一行中完成所有操作：
$（'＃btnUpdate'）。filter（“：visible”）。animate（{width：“ toggle”}）;
|
：visible选择器根据jQuery文档：
它们的CSS显示值为none。
它们是type =“ hidden”的表单元素。
它们的宽度和高度明确设置为0。
祖先元素被隐藏，因此该元素未显示在页面上。
具有可见性：隐藏或不透明：0的元素被视为可见，因为它们仍然占用布局中的空间。
这在某些情况下很有用，而在其他情况下则没有用，因为如果您要检查元素是否可见（显示！=无），而忽略父级的可见性，则会发现执行.css（“ display”）=='none不仅速度更快，而且还会正确返回可见性检查。
如果要检查可见性而不是显示，则应使用：.css（“ visibility”）==“ hidden”。
还请考虑其他jQuery注释：
因为：visible是jQuery扩展，而不是CSS规范的一部分，所以使用：visible的查询无法利用本机DOM querySelectorAll（）方法提供的性能提升。为了在使用：visible选择元素时达到最佳性能，请首先使用纯CSS选择器选择元素，然后使用.filter（“：visible”）。
另外，如果您担心性能，则应选中“现在您可以看到我…显示/隐藏性能”（2010-05-04）。并使用其他方法来显示和隐藏元素。
|
这对我有用，并且我正在使用show（）和hide（）使div隐藏/可见：
if（$（this）.css（'display'）=='none'）{
/ *您的代码在这里* /
}其他{
/ *替代逻辑* /
}
|
元素可见性和jQuery如何工作；
元素可以通过display：none隐藏，可见性：隐藏或不透明：0。这些方法之间的区别：
display：none隐藏元素，并且不占用任何空间；
可见性：隐藏隐藏元素，但是它仍然占用布局中的空间；
opacity：0将元素隐藏为“ visibility：hidden”，并且仍然占据布局中的空间；唯一的区别是不透明度使一个元素可以部分透明。
如果（$（'。target'）。is（'：hidden'））{
$（'。target'）。show（）;
}其他{
$（'。target'）。hide（）;
}
如果（$（'。target'）。is（'：visible'））{
$（'。target'）。hide（）;
}其他{
$（'。target'）。show（）;
}
如果（$（'。target-visibility'）。css（'visibility'）=='隐藏'）{
$（'。target-visibility'）。css（{
可见性：“可见”，
显示：“”
}）;
}其他{
$（'。target-visibility'）。css（{
可见性：“隐藏”，
显示：“”
}）;
}
如果（$（'。target-visibility'）。css（'opacity'）==“ 0”）{
$（'。target-visibility'）。css（{
不透明度：“ 1”，
显示：“”
}）;
}其他{
$（'。target-visibility'）。css（{
不透明度：“ 0”，
显示：“”
}）;
}
有用的jQuery切换方法：
$（'。click'）。click（function（）{
$（'。target'）。toggle（）;
}）;
$（'。click'）。click（function（）{
$（'。target'）。slideToggle（）;
}）;
$（'。click'）。click（function（）{
$（'。target'）。fadeToggle（）;
}）;
|
您也可以使用普通JavaScript进行此操作：
函数isRendered（domObj）{
如果（（domObj.nodeType！= 1）||（domObj == document.body））{
返回true；
}
if（domObj.currentStyle && domObj.currentStyle [“ display”]！=“ none” && domObj.currentStyle [“ visibility”]！=“ hidden”）{
返回isRendered（domObj.parentNode）;
}否则，如果（window.getComputedStyle）{
var cs = document.defaultView.getComputedStyle（domObj，null）;
if（cs.getPropertyValue（“ display”）！=“ none” && cs.getPropertyValue（“ visibility”）！=“ hidden”）{
返回isRendered（domObj.parentNode）;
}
}
返回false；
}
笔记：
无处不在
适用于嵌套元素
适用于CSS和内联样式
不需要框架
|
我会使用CSS类.hide {display：none！important; }。
对于隐藏/显示，我调用.addClass（“ hide”）/。removeClass（“ hide”）。为了检查可见性，我使用.hasClass（“ hide”）。
如果您不打算使用.toggle（）或.animate（）方法，则这是一种检查/隐藏/显示元素的简单明了的方法。
|
演示链接
$（'＃clickme'）。click（function（）{
$（'＃book'）。toggle（'slow'，function（）{
//动画完成。
alert（$（'＃book'）。is（“：visible”））; // <---如果可见，则为TRUE，如果隐藏，则为False
}）;
}）;