如何使用jQuery检查DOM中不存在的元素是否可见

Question

看起来DOM中没有的元素被认为是隐藏的，无论应用于这些元素的CSS

例如，将以下内容放入Chrome控制台评估为false：

$('<div style="display: block;">i am a div</div>').is(":visible")

有没有办法检查上面的分离元素是否可见。我不只是想检查display css属性是否为block。

Answer 1

这取决于你想要做什么，但最简单的方法就是附上它来检查：

var $div = $("<div>");
$div.appendTo("body").is(":visible");
$div.detach();

如果此检查对您不利，您可以同时检查display和visibility CSS，检查它们是否分别为none和hidden未设置hidden属性。您也可以执行类似集position: fixed; top: 100%的操作并执行上述测试。

编辑：似乎jQuery的隐藏检查是：

jQuery.css( elem, "display" ) === "none"
|| !jQuery.contains( elem.ownerDocument, elem )

所以你可以摆脱那里的第二行做同等的检查。

Answer 2

Sure you can

var foo = $('<div style="display: block;">i am a div</div>');
foo.appendTo('body');

var vis = foo.is(":visible");

console.log(vis);

foo.detach();

不知道为什么你想尝试这个。

Answer 3

试试这个：

$('<div style="display: block;">i am a div</div>').css("display")!="none"

Answer 4

如果某个元素没有附加到DOM，那么浏览器不会将其视为可见，因为简单地说它没有可能影响其可见性的父级