檢查一個DIV的內容是否只是一個圖像

我有一個div，最初包含一個加載器圖像標籤。檢查一個DIV的內容是否只是一個圖像

<img src="/images/indicator_big.gif" style="display:block;margin:auto">

我想檢查DIV是否只包含加載程序映像，然後函數應該觸發一個Ajax請求。

如果我做了一些像div.innerHTML這樣的東西，我把它作爲一個字符串。

測試innerHTML是否只是一個加載程序映像的最佳方法是什麼？

來源

2012-11-27 user160820

你使用jQuery或其他庫嗎？ – andlrc

當然你不應該依靠div的內容來決定你是否需要進行AJAX請求？有一個布爾變量isLoaded不是更好嗎，你可以檢查嗎？ –

此圖像僅用於顯示處理是否正在加載？可能更容易將附加類加載到DIV，並測試該類的存在。 – sargant

這種方法將你問什麼，但我不知道一般的方法是最好的，說實話。

function hasOnlyImg(div) { 
    if (div.children.length != 1) 
    return false; 
    return div.children[0].tagName == "IMG"; 
}

來源

2012-11-27 11:28:29

只要記住一些瀏覽器會輸出'tagName'作爲小寫，所以你可能想調整。 – peirix

您可以檢查多少元素你的元素

var children = document.querySelector("#yourDiv > *"); 
if (children.length == 1 && children[0].tagName.toLowerCase() == "img") { 
    //you only have one child in here, and that's an image 
}

內這將是1，如果它僅包含您最初的圖像。

警惕瀏覽器的支持，雖然：http://www.quirksmode.org/dom/w3c_core.html#t13

來源

2012-11-27 11:27:41 peirix

你應該添加一個檢查，它確實是一個圖像裏面... –

我假設你的'style.display'的加載器圖像會改變？你可以檢查一下嗎？

function checkDiv(div,func) { 
    var thisDiv = div; 
    var imgLink = thisDiv.getElementsByTagName("img"); 
    if (imgLink.length == 1 && imgLink[0].style.display !== "block") { 
     func(); 
    } 
} 
checkDiv(document.getElementById("mydiv"),function() { 
    //call ajax code 
});

或者，如果你仍然想你的專區內檢查HTML標籤的數量，只是這樣做：

var allDivTags = mydiv.getElementsByTagName("*"); 
if (allDivTags.length == 1 && allDivTags.nodeName.toLowerCase() == "img") { 
    //only 1 html element exists in the div, and it's an image. 
    //run code 
}

希望這有助於。

來源

2012-11-27 12:01:12 Hogsden

檢查一個DIV的內容是否只是一個圖像

回答

相關問題