Javascript 检查div的子项是否少于两个

我刚刚开始使用jQuery，但我无法理解这一点

我需要检查div是否包含h3头标签以外的任何内容

html的结构如下所示：

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

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

提前感谢：）

试试：

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

---

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

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

---

这里的基本问题是像

children

这样的jQuery方法将无法获得文本节点。如果要查看一个div有多少子节点，并包括文本节点，则需要获取实际的dom节点，并检查其

childNodes

属性的长度。这将包括文本节点

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

---

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

HTML:

始终存在的标题
任何html、纯文本或空文本

---

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

您可以使用

$（“#myContainer”）.contents（）.length

获取节点数，包括文本节点但是，这包括

之前的换行符等。

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

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

通过编辑div内容并点击Run查看结果，查看下面的演示

使用上面的函数，你可以做如下事情

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

---

决不能在

if

子句中使用裸jQuery对象，因为它总是“truthy”。如果您想检查是否有匹配项，请使用

$（…）.length>0

。您是否尝试过使用.not（'h3'）的children（）？这不是他的要求，因为

。length

不包括文本节点。但是我不确定这是否适用于容器

div

中的纯文本。您必须小心，因为在他的示例中，共有5个节点：

\n

，

，

\n

，

，和

\n

，似乎这就解决了问题。我必须这样写：

var$cont=$（'myContainer'），$children=$cont.contents（）.not（'h3'）；如果（$children.text（）===''）{$cont.hide（）；}

这似乎是一个可行的解决方案吗？我相信是的……或者$.trim（$children.html（））==''trim从html中删除空白，如果换行是一个问题，可能必须使用一些正则表达式来真正清理东西up@charlietfl似乎不起作用，我想你需要检查其他元素。内容。请检查我下面的答案，但我不确定是否仅使用选择器就可以实现。对不起，我正在商业网店系统上使用它，因此我无法将文本包装在元素中。非常感谢！这似乎是完美的工作！明天我会在我的网站上测试它。

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

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

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

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