26

自動生成された HTML ドキュメントで次の要素を非表示にしようとしています。

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

    </p>

一部のページでは、<p>タグに内部値が含まれますが、他のページでは、例に示すようにスペースのみを含めることができます。HTML の変更はオプションではないため、CSS のみを使用して非表示になるように、これを非表示にする方法を見つける必要があります。

を使用して非表示にしようとしました

.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/で Fiddle を参照してください。

于 2015-05-21T20:24:43.433 に答える
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 に答える
4

セレクターは:empty確かに非常に厳密です。スペースを含む要素は空とは見なされません。というわけで解決策は2つ

  1. 出力を変更します。出力する値をトリミングするか、HTML を最小化して、これらのスペースが削除されるようにします。さらに良いことに、これらの要素をまったくレンダリングしないでください。トラフィックを最小限に抑え、Javascript なしで機能するソリューションを提供するため、これが最良のオプションだと思います。
  2. これらの要素を見つけるには、Javascript を使用します。これらの要素を簡単に見つけるためのトリックを私は知らないので、すべての要素を調べて、空と思われるものを探し、それらの要素にクラスを追加する必要があるかもしれません。これは、特にローエンドのデバイスでは非常に遅くなる可能性があります。また、スクリプトが実行されると要素が非表示になるだけなので、ページの読み込み時に要素が非表示になるまでしばらくの間表示されます。これが理想的なソリューションではないことは明らかです。

たぶん、両方を組み合わせることができます。セレクターは CSS3 セレクターであり、:emptyIE8 以前ではまだサポートされていないため、これらのブラウザーでは Javascript フォールバックを使用することをお勧めします。ただし、空の要素がまったくレンダリングされないようにサーバー側のスクリプトを修正できないか、レンダリング中に特別なクラスが与えられるため、Javascript は必要ありません。

于 2012-11-14T14:47:50.547 に答える
0

純粋なCSSで空の要素を検出する方法はありません（まだ）。Javascriptがオプションではない場合、ブラウザに到達する前にHTMLを操作するためにサーバー側でできることはありますか？

于 2012-11-14T14:43:51.630 に答える
0

標準ではありませんが、Firefox には " :-moz-only-whitespace " があります。

また、いくつかの「将来の証明」のために、css-tricks:blankは、CSS セレクター レベル 4 ドラフトの一部になるセレクターについて言及しています。現在、これをサポートしているブラウザーはありませんが、可能性はあります。

于 2015-02-19T14:52:52.130 に答える
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 に答える
-4

あなたが使用することができます：

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

そこにランダムに複数のスペースがない限り...

于 2015-01-23T21:25:10.647 に答える