Wie überprüft man, ob div leer ist und verschwindet?

Question

Was ich habe ist manchmal auf ym Seite ein div könnte leer sein und es braucht leeren Platz. Deshalb möchte ich in der Lage sein, es zu verbergen, von der Breite klein machen, wenn es leer ist ..

dies der html ...

<div class="four columns"> 
     <div class="inner-column" style="height:500px;overflow: auto;">    
      <ul class="SubMenu"> 
      </ul> 
     </div> 
    </div> 

ist dies die jquery ich versuche ...

if ($('.four columns').is(":empty")) { 
      $('.four').css('width','15px'); 
     } 

was sollte es sein?

Beispiel: http: //jsfiddle.net/uzi002/yad9Q/6/

Answer 1

Das Problem mit der Überprüfung text() für eine Länge von Null oder gegen eine leere Zeichenfolge ist, dass es alle Registerkarten und Leerzeichen enthält. So wenden Sie einen $.trim() auf das Ergebnis (demo):

$(function() { 

    if ($.trim($('.four.columns').text()).length === 0) { 
     $('.four.columns').hide(); 
    } 

});​​​​​​ 

auch, falls Sie alle Spalten überprüfen möchten, verwenden Sie:

$(function() { 

    /* check all columns */ 
    $('.columns').each(function(){ 
     if ($.trim($(this).text()).length === 0) { 
      $(this).hide(); 
     } 
    }); 

});​​​​​​ 

Answer 2

Die Technik, die ich verwende in der Regel ist die Länge des Textes im div zu testen:

if ($('.four.columns').text().length === 0) { 
    $('.four').css('width', '15px'); 
} 

Answer 3

Sie könnten do

if ($('.four columns').text() === '') { 
     $('.four colums').hide(); 
    } 

oder

if ($('.four columns').html() === '') { 
     $('.four colums').hide(); 
    } 

Answer 4

können Sie die Höhe 0 machen oder ausblenden:

if($(".innerColumn").text() == ""){ 
    $(".innerColumn").css("height",0); or $(".innerColumn").hide() 
} 

Answer 5

Zuerst sparate Klassen mit einem Raum

<div class="four columns"> 

Das sind jetzt 2 Klassen genannt „vier“ und „Spalten“, so dass die Klasse kann nicht ist nicht vier Säulen genannt.

Ich sollte die Länge Funktion wählen, um zu überprüfen, ob es leer ist.

if ($('.columns .inner-column').html().length === 0){ 
    $(".columns .inner-column").hide() 
} 

Die Verbergen-Funktion verbirgt das gesamte Element. Es ist im Quellcode, aber nicht sichtbar für den Client.

Darf ich fragen, warum Sie dieses Problem Client-Seite lösen möchten? Ich denke, es ist schlauer, die Serverseite zu überprüfen, wenn der Inhalt leer ist, und dann das Bild nicht zu erzeugen.