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

尝试：

$("#myContainer").children('h3').hide();

jsfiddle

Answer 2

您可以将'纯文本'包装在p元素中并使用此选择器： fiddle

$("#myContainer").children().not('h3').hide();
//Select all children but not the h3

HTML：

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

Answer 3

我想你想要一个能告诉你div是否只包含H3还是有其他元素的函数。我不认为有直接的jQuery选择器，所以我写了一个简单的函数checkForJustH3。

DEMO - 这表明如何隐藏只有H3的div。

通过编辑div内容和Hit Run查看下面的演示以查看结果。

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");
}

Answer 4

您可以使用length属性查看div有多少个孩子

$("#myContainer").children('h3').length

Answer 5

这里的根本问题是像children这样的jQuery方法不会获得文本节点。如果要查看div有多少个子节点并包含文本节点，您需要获取实际的 dom节点，并检查其childNodes属性的长度。这将包括文本节点。

if ($("#myContainer")[0].childNodes.length > 1) {

Answer 6

var $cont=$('#myContainer'), $children=$cont.contents().not('h3');
if( ! $children.length) {
     $cont.hide();
}

使用contents（）方法将检查元素中是否有标记或文本节点，检查子对象是否有长度，如果没有隐藏容器

Answer 7

您可以使用$("#myContainer").contents().length来获取节点数，包括文本节点。但是，这包括<h3>之前的换行符等。

检查div是否少于两个孩子

7 个答案: