为什么$（“div：visible”）在使用phantomjs的茉莉花测试中找不到任何东西？

Question

Html代码：

<div id="xxx"><div>aaa</div></div>

Js代码：

var node = $("#xxx");
var found = node.find("div:visible");
console.log(found.length);

如果这些代码在浏览器上运行，则会输出1。 （现场演示：http://jsbin.com/xuqule/2/edit）

但是当我用phantomjs在jasmine测试中运行时：

it("should find the visible nodes", function () {
   var node = $("<div><div>aaa</div></div>");
   var found = node.find("div:visible");
   console.log(found);
   expect(found.length).toEqual(1);
});

测试失败，found.length为0。为什么以及如何解决它？

Answer 1

来自文档：

:visible

  

如果元素在文档中占用空间，则会将其视为可见。可见元素的宽度或高度大于零。

     

具有可见性的元素：隐藏或不透明度：0被认为是可见的，因为它们仍占用布局中的空间。

     

不在文档中的元素被视为隐藏; jQuery没有办法知道它们在附加到文档时是否可见，因为它取决于适用的样式。

要修正您的规范，您需要将元素附加到文档中，并且应该有height和width。

Answer 2

你没有在dom上附上任何东西，它都存在于记忆中，这就是为什么你会得到0。

尝试做类似的事情：

$('body').append(node);
var found = node.find("div:visible");
...

请参阅bin：http://jsbin.com/kuyagijezono/1/edit