.css('display')怎么能阻止,[0] .hidden是假的,而.is(':hidden')是真的吗？

Question

我有一个div被隐藏的情况,即使我刚刚执行的代码显示所有其他具有相同后缀的div: $("[id$='-input-container']").show()

无论如何,一个特定的div仍然隐藏着:$("#single-colorRange-color-input-container").我想也许它后来隐藏在代码中但没有 - 在调用之后$inputContainers.show()我立即添加了日志记录(并且debugger语句会停止所有后续执行):

console.log($("#single-colorRange-color-input-container").css('display'));      
$inputContainers.show();
console.log($("#single-colorRange-color-input-container").css('display'));
console.log($("#single-colorRange-color-input-container")[0].hidden);
console.log($("#single-colorRange-color-input-container").is(':hidden'));
debugger;

首先none记录为.show()调用之前的css/display值.这是预料之中的.

然后block记录为.show()调用后的css /显示值.这是预料之中的.

然后false记录为hidden结果集的第一个(唯一)元素的属性.这是预料之中的.

然后true记录为调用的结果.is(':hidden').这是出乎意料的.

如何.css('display')阻止,[0].hidden虚假和.is(':hidden')真实？尽管有这样的调用.show(),但实际上div仍然是隐藏的,如果有一些合理的解释,我只为这一个div添加特殊逻辑似乎是荒谬的.

Answer 1

根据jQuery文档,隐藏选择器可以在以下任何情况下返回true

• 它们的CSS显示值为none.
• 它们是type ="hidden"的表单元素.
• 它们的宽度和高度显式设置为0.
• 隐藏了一个祖先元素,因此该元素不会显示在页面上.

因为hidden是一个非常简单的布尔值,并且显示是块我的猜测是它是由于最后三个中的一个,特别是最后一个点.确保所有祖先都可见.