為什么$（“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進行茉莉花測試時：

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

來自文檔：

：可見

如果元素占用文檔中的空間，則認為元素是可見的 。 可見元素的寬度或高度大於零。

具有可見性的元素：隱藏或不透明度：0被認為是可見的，因為它們仍然占用布局中的空間。

不在文檔中的元素被視為隱藏; jQuery沒有辦法知道它們在附加到文檔時是否可見，因為它取決於適用的樣式。

要修復您的規范，您需要將元素附加到文檔，它應具有height和width 。

Answer 2

你沒有把任何東西附在dom上，它都存在於記憶中，這就是為什么你會得到0。

嘗試做類似的事情：

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

見bin： http ： //jsbin.com/kuyagijezono/1/edit