javascript - 检查 div 是否少于两个 child

Question

我刚开始使用 jQuery，对此一头雾水。

我需要检查一个 div 是否包含但一个 h3 标题标签。

html的结构如下:

<div id="myContainer">
<h3>A header that is always present</h3>
any html, plain text or empty
</div>

这是 jQuery:

if ( $("#myContainer h3:only-child") ) {
  $("#myContainer").css("display", "none");
}

如果不存在其他 html 元素，上面的代码将简单地隐藏 div，这不是我想要的，因为它还将包含纯文本。我尝试过其他选择器和函数，但我似乎无法正确选择。

提前致谢:)

Answer 1

我认为您需要一个函数来告诉您 div 是否仅包含 H3 或还包含其他元素。我不认为有一个直接的 jQuery 选择器，所以我写了一个简单的函数来检查 ForJustH3。

DEMO - 这显示了如何隐藏只有 H3 的 div。

通过编辑 div 内容查看下面的演示，然后点击运行以查看结果。

DEMO

function containsJustH3 (el) {
   var result = true;
    $(el).contents().each (function() {
        if (this.nodeName != 'H3') {
            //check for blank line or empty spaces
            if (this.nodeType == 3 && $.trim(this.nodeValue) == '') {
                return true;
            }                
            result = false;
            return false;
        }
    });

    return result;
}

使用上面的函数你可以做一些事情，

if ( containsJustH3("#myContainer") ) {
  $("#myContainer").css("display", "none");
}