wake-up-neo.com

Ein Element ausblenden, das nur Leerzeichen enthält, die CSS verwenden

Ich versuche das folgende Element in einem automatisch generierten HTML-Dokument auszublenden:

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

    </p>

Auf einigen Seiten enthält das <p>-Tag einen inneren Wert, auf anderen kann es jedoch nur Leerzeichen enthalten, wie im Beispiel gezeigt. Ich muss einen Weg finden, dies zu verbergen, sodass es nur mit CSS verborgen wird, da das Ändern des HTML-Codes keine Option ist. 

Ich habe versucht, es mit zu verstecken

.sitspagedesc:empty
{
display:none;
}

dies funktioniert jedoch nicht, vermutlich aufgrund der Leerzeichen, die das Element enthält.

Hat jemand irgendwelche guten Ideen? 

Vielen Dank :)

htmlcsshidepseudo-class
23
Andy Kaufman

Ich glaube nicht, dass Sie dies mit reinem CSS tun können.

Mit etwas JavaScript können Sie es jedoch tun.

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';
  }
}

Wenn Sie Zugriff auf jQuery haben, ist die Filterung mit den integrierten Selektoren etwas einfacher.

$('p.sitspagedesc').each(function(){
  if($(this).children().length == 0){
    $(this).hide();
  }
});
9
scunliffe

Wenn der Wunsch besteht, die Funktionalität des :empty-Selektors nachzuahmen, mit der Ausnahme, dass Leerzeichen ignoriert werden, funktioniert die akzeptierte Antwort (von scunliffe ) nicht ganz. Es wird nur nach untergeordneten Elementen gesucht, und der Text wird nicht direkt im ausgewählten Element berücksichtigt. Zum Beispiel wird <p>Hello World!</p> als leer behandelt, da es keine untergeordneten Elemente enthält, obwohl es Text ohne Whitespace enthält.

Meine Lösung verwendet die Funktion jQuery.trim () , um führende und nachgestellte Leerzeichen aus dem .text () - Wert zu entfernen, der den kombinierten Textinhalt des ausgewählten Elements und seiner Nachkommen enthält. Das ausgewählte Element wird also ausgeblendet, wenn es keinen Nicht-Whitespace-Text und keine untergeordneten Elemente enthält. HTML-Kommentare werden wie der leere Selektor nicht als Inhalt gezählt, da sie weder in den Werten .text () noch in .children () wiedergegeben werden.

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

Siehe Fiddle unter https://jsfiddle.net/TNTitan89/crejkbxq/ .

5
Garland Pope

Antwort: Noch nicht, aber es ist verfasst.

https://drafts.csswg.org/selectors-4/#the-blank-pseudo

... und - zumindest für Mozilla - gibt es bereits eine Implementierung mit vorangestelltem Code ... :-moz-only-whitespace:

http://jsfiddle.net/peayLrv3/

4
Frank Nocke

Der :empty-Selektor ist in der Tat sehr streng. Ein Element, das ein Leerzeichen enthält, wird nicht als leer betrachtet. Es gibt also zwei Lösungen

  1. Ändern Sie die Ausgabe. Kürzen Sie die ausgegebenen Werte oder minimieren Sie den HTML-Code, sodass diese Leerzeichen entfernt werden. Oder noch besser: Rendern Sie diese Elemente überhaupt nicht. Ich denke, dass dies die beste Option ist, da es den Verkehr minimiert und Ihnen eine Lösung bietet, die ohne Javascript funktioniert.
  2. Verwenden Sie Javascript, um diese Elemente zu finden. Mir sind keine Tricks bekannt, mit denen Sie diese Elemente leicht finden können. Daher müssen Sie möglicherweise alle Elemente durchgehen, nach solchen suchen, die Sie als leer betrachten, und diesen Elementen eine Klasse hinzufügen. Dies kann besonders bei Low-End-Geräten sehr langsam sein. Außerdem werden die Elemente nur ausgeblendet, wenn das Skript ausgeführt wird. Beim Laden der Seite wird das Element für kurze Zeit sichtbar sein, bis es ausgeblendet wird. Es kann klar sein, dass dies nicht die ideale Lösung ist.

Vielleicht kannst du beides kombinieren. Der :empty-Selektor ist ein CSS3-Selektor und wird von IE8 und davor noch nicht unterstützt. Daher kann ein Javascript-Fallback für diese Browser eine gute Idee sein, es sei denn, Sie können das serverseitige Scripting so korrigieren, dass die leeren Elemente überhaupt nicht gerendert werden Sie erhalten Ihre spezielle Klasse während des Renderns, daher ist kein Javascript erforderlich.

3
GolezTrol

Firefox ist zwar kein Standard, hat jedoch " : -moz-only-whitespace ".

Für ein "zukünftiges Proofing" erwähnt css-tricks einen :blank-Selektor, der Teil des Entwurfs von CSS Selectors Level 4 sein wird. Obwohl kein aktueller Browser dies unterstützt, ist dies möglich.

0
Fewfre

Es gibt keine Möglichkeit, leere Elemente (bisher) in reinem CSS zu erkennen. Wenn Javascript keine Option ist, können Sie serverseitig die HTML-Datei bearbeiten, bevor sie den Browser erreicht?

0
A.M. D.

Hier ist meine Lösung, die ich gerade für einen Client mit jQuery 1.5.x implementiert habe. Möglicherweise müssen Sie die //skip empty tags but which are valid-Zeichenfolge für reguläre Ausdrücke anpassen.

$('*: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()
    }
);
0
Daniel Sokolowski