Question

我有一个div，最初包含一个加载器图像标记。

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

我想检查DIV是否只包含加载程序映像，然后该函数应该触发Ajax请求。

如果我做了div.innerHTML这样的事情，我会把它作为一个字符串。

测试innerHTML是否只是加载器图像的最佳方法是什么？

Answer 1

您可以检查元素中有多少元素

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

Answer 2

这种方法会按照你的要求行事，虽然我不确定一般方法是否最好是诚实的。

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

Answer 3

我假设你的装载机图像的'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
});

或者，如果您仍想查看div中的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
}

希望这会有所帮助。

检查DIV的内容是否只是图像

3 个答案: