jquery - 如果 div 不包含任何文本，则隐藏该 div

Question

如果PageHeaderDescription不包含任何文本内容，那么我想隐藏它。用jquery可以吗？

<div class="PageHeaderDescription">
  <h1>Accessories</h1>
  <img border="0" src="" style="cursor: pointer; display: none;" id="EntityPic621">
</div>

这是带有文本的 div 的样子:

<div class="PageHeaderDescription">
  <h1>Accessories</h1>
  <img border="0" src="" style="cursor: pointer; display: none;" id="EntityPic621">
  This is the Accessories page, you can find stuff for the products!
</div>

Answer 1

这会变得很麻烦，因为我必须比我想要的更深入地研究 DOM，但它适用于你想要的东西:

$('div.PageHeaderDescription').each(function(i,e){
    var txt = '';
    for (var c = 0; c < e.childNodes.length; c++){
        if (e.childNodes[c].nodeType===3){
            txt += e.childNodes[c].data;
        }
    }
    if (txt.trim().length===0){
        $(e).hide();
    }
});

再说一次，虽然很老套但很有效。您必须记住，甚至 DOM 中也会考虑空格，因此仅通过“没有 nodeType===3 元素”来检查/过滤是不够的。相反，您连接所有文本，然后修剪它以删除空格并获取长度。

<小时/>

使用自定义选择器进行后续操作:

(function($){
    $.expr[':'].notext = function(obj, index, meta, stack){
        var txt = '';
        for (var c = 0; c < obj.childNodes.length; c++){
            if (obj.childNodes[c].nodeType===3){
                txt += obj.childNodes[c].data;
            }
        }
        return (txt.trim().length===0);
    };
})(jQuery);

$('div.PageHeaderDescription:notext').hide();

当然还有working demo