JavaScript-檢查div是否為空

Question

我有以下設置：

      <div id="whatever">
           <!-- Here some dynamic divs will be loaded -->
      </div>

我需要知道“ whateverdiv”何時什么都沒有。 問題是，當我什么也不說時，我的意思是用戶什么也看不到。 因此，如果在div內類似

      <div style="display: none">LOOOONG TEXT</div>

已加載，我認為它是空的。

如果充滿空白，也將是空的，依此類推...如果用戶看不到任何內容，則為空。

由於涉及的案例太多（高度為0的內容，無顯示的內容，空格，選項卡，隱藏的輸入等……根據情況可能會在其中加載幾乎所有內容），我嘗試使用height屬性來查看是否有內容（div會根據內容擴展）。 這個想法行得通，但是現在我又遇到了一個問題：我必須添加顯示功能：有時沒有顯示。 當我這樣做時，高度始終加載為0。我無法使用可見性，因為div具有10px的填充，我不想看到何時未顯示。 因此，我回到正題……尋找某種方式來查看div在所有情況下是否為空。

知道我該怎么做嗎？

Answer 1

var d = $('#myDiv');
var empty = d.text().trim().length === 0 || !d.is(':visible');

Answer 2

這應該工作。 http://jsfiddle.net/fedmich/SmRnT/

我正在通過正則表達式清理html注釋

 $(function() {
    var w = $('#whatever').clone();
    w.find(':hidden').remove();

    var html = w.html();
    html = html.replace(/<!--.*-->/g,'')
    html = $.trim(html);

    alert( html );
});​

總結一下

 clone the object
 remove hidden elements
 remove html comments
 $.trim(  )

Answer 3

如果您不將空格視為不為空的內容：

$("selector").is(":empty")

要么

$("selector").contens().length

絕招。

如果您不想將文本節點計為空：

$("selector").children().length

看到：
http://api.jquery.com/empty-selector/
http://api.jquery.com/contents/
http://api.jquery.com/children/