26

我试图在自动生成的 HTML 文档中隐藏以下元素：

  <p id="sitspagedesc" class="sitspagedesc">

    </p>

在某些页面中，<p>标签将包含一个内部值，但在其他页面中，它只能包含空格，如示例所示。我需要找到一种隐藏它的方法，以便仅使用 CSS 将其隐藏，因为更改 HTML 不是一种选择。

我试图隐藏它使用

.sitspagedesc:empty
{
display:none;
}

但这不起作用，大概是由于元素包含的空间。

有没有人有什么好主意？

谢谢 ：）

4

9 回答 9

14

我不认为你可以用纯 CSS 来做到这一点。

但是，只需一点 JavaScript，您就可以做到。

var allParas = document.getElementsByTagName('p');
//filter by class name if desired...
for(var i=0;i<allParas.length;i++){
  if(allParas[i].getElementsByTagName('*').length == 0){
    allParas[i].style.display = 'none';
  }
}

如果您可以访问 jQuery，则使用其内置选择器进行过滤会更容易一些。

$('p.sitspagedesc').each(function(){
  if($(this).children().length == 0){
    $(this).hide();
  }
});
于 2012-11-14T14:48:18.627 回答
7

如果希望模仿:empty选择器的功能，但忽略空格，则接受的答案（由scunliffe）不太有效。它只检查子元素，这并不直接考虑所选元素内的文本。例如，<p>Hello World!</p>将被视为空，因为它没有子元素，即使它确实包含非空白文本。

我的解决方案使用jQuery.trim()函数从.text()值中删除前导和尾随空格，该值包含所选元素及其后代的组合文本内容。因此，如果所选元素不包含非空白文本和子元素，则它会被隐藏。与 :empty 选择器一样，HTML 注释不计为内容，因为它们不会反映在 .text() 或 .children() 值中。

$('p.sitspagedesc').each(function(){
    if($.trim($(this).text()) == '' && $(this).children().length == 0){
        $(this).hide(); 
    }
});

请参阅https://jsfiddle.net/TNTitan89/crejkbxq/上的小提琴。

于 2015-05-21T20:24:43.433 回答
4

选择:empty器确实非常严格。包含空格的元素不被认为是空的。所以有两种解决方案

  1. 修改输出。修剪您输出的值或最小化 HTML，以便删除这些空格。甚至更好：根本不渲染这些元素。我认为这是最好的选择，因为它既可以最大限度地减少流量，又可以为您提供无需 Javascript 即可运行的解决方案。
  2. 使用 Javascript 来查找这些元素。我不知道可以让您轻松找到这些元素的技巧，因此您可能必须遍历所有元素，搜索您认为为空的元素并为这些元素添加一个类。这可能非常慢，尤其是在低端设备上。此外，它只会在脚本运行后隐藏元素，因此在页面加载时，元素将在短时间内可见，直到它被隐藏。很明显，这不是理想的解决方案。

也许你可以将两者结合起来。选择:empty器是 CSS3 选择器，IE8 及之前的版本尚不支持，因此 Javascript 后备对于这些浏览器可能是一个好主意，除非您可以修复服务器端脚本，以便根本不呈现空元素，或者在渲染期间给定您的特殊课程，因此不需要 Javascript。

于 2012-11-14T14:47:50.547 回答
4

答：还没有，但已经起草了。

https://drafts.c​​sswg.org/selectors-4/#the-blank-pseudo

...而且——至少对于 Mozilla 来说——已经有一个前缀实现... :-moz-only-whitespace：

http://jsfiddle.net/peayLrv3/

于 2015-08-20T10:03:37.537 回答
0

没有办法检测纯 CSS 中的空元素（到目前为止）。如果 Javascript 不是一个选项，您可以在服务器端做些什么来在 HTML 到达浏览器之前对其进行操作吗？

于 2012-11-14T14:43:51.630 回答
0

这是我刚刚使用 jQuery 1.5.x 为客户端实现的解决方案 - 您可能需要调整//skip empty tags but which are valid正则表达式字符串。

$('*:only-child:empty').each(
    function(index) {
        var currentElement = $(this);
        // skip singleton tags
        if(/^(?:area|br|col|embed|hr|img|input|link|meta|param)$/i.test(currentElement.get(0).tagName) == true) {
                return
        }
        // skip empty tags but which are valid
        if(/^(?:textarea)$/i.test(currentElement.get(0).tagName) == true) {
                return
        }
        while (currentElement.parent().children().length == 1) {
            currentElement = currentElement.parent();
        }
        // so 0 or more children for the parent then we hide it
        // we will never have more then 0 children though the :empty takes care of that
        console.log('hidding: ' + currentElement);
        currentElement.hide()
    }
);
于 2014-01-31T04:07:05.050 回答
0

虽然不是标准，但 Firefox 有“ :-moz-only-whitespace ”。

此外，对于一些“未来的证明”，css-tricks提到了一个:blank选择器，它将成为 CSS 选择器级别 4 草案的一部分。虽然当前没有浏览器支持它，但这是一种可能性。

于 2015-02-19T14:52:52.130 回答
-1

CSS：

.sitspagedesc:empty
{
display:none;
}

jQuery：

$('.sitspagedesc').html(function(){
// empty element
return $.trim($(this).html());
});
于 2017-10-11T16:16:09.773 回答
-4

你可以使用：

p.sitspagedesc {
  content: " "; 
  display: none;
}

除非你在那里随机有多个空格......

于 2015-01-23T21:25:10.647 回答