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

如果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>

最佳答案

这变得很棘手，因为我必须比我想要的更深入地了解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();
    }
});

再次，hacky但有效。您必须记住，即使在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

关于jquery - 如果不包含文本，则隐藏div，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/11561211/