wenn div Inhalt hat, zeige div

Lesezeit: 3 Minuten

Benutzer-Avatar
Alex

ok, hier ist, was ich habe … es funktioniert gut, aber es sucht eher nach einem Wort als nach Inhalt. Ich möchte nur, dass es angezeigt wird, wenn es Inhalte gibt.

 $(document).ready(function(){
       if ($("#box3:contains('Product')").length) {
          $('#third').show();
       }                                           
    });

Ich glaube nicht, dass Sie das HTML dafür brauchen

es sucht nach ‘Produkt’, wie mache ich es, dass es nur nach Inhalt > 0 sucht

<div id="first" class="tab" >
    <div class="tabtxt">
        <a>DETAILS</a>
    </div>
</div>
<div class="tab" id="second">
    <div class="tabtxt">
        <a>INSPIRATION</a>
    </div>
</div>
<div class="tab" id="third" style="display:none">
    <div class="tabtxt">
        <a>NOTES</a>
    </div>
</div>

<div class="boxholder">
    <div style="overflow: hidden; display:block" class="box" id="box1">
        <div style="padding: 10px; line-height:16px">
            %%Panel.ProductDescription%%
        </div>
    </div>
    <div style="overflow: hidden; display:none" class="box" id="box2">
        <div style="padding: 10px; line-height:16px">
            %%Panel.ProductWarranty%%
        </div>
    </div>
    <div style="overflow: hidden; display:none" class="box" id="box3">
        <div style="padding: 10px; line-height:16px">
            %%Panel.UPC%%
        </div>
    </div>
</div>

Es ist ein Interspire-Einkaufswagen, also ruft %%panel.upc%% etwas auf, das über das Admin-Panel eingefügt wurde. in diesem Fall, wenn nichts vorhanden ist, wird es als Leerzeichen im Code angezeigt (Quelle im Browser anzeigen).

Wenn Sie nachsehen möchten Textdu kannst den … benutzen text() Methode:

 $(document).ready(function(){
   if ($("#box3").text().length > 0) {
     $('#third').show();
   }                                           
 });

Oder für HTML:

 $(document).ready(function(){
   if ($("#box3").html().length > 0) {
     $('#third').show();
   }                                           
 });

  • Überprüfung auf .text() ist hier keine gute Idee, zum Beispiel: <img src="something.jpg" />

    – Nick Craver

    8. Oktober 2010 um 18:54 Uhr

  • @Nick Craver: Das habe ich auch gepostet html() Methode, dachte nur, er möchte vielleicht nur nach Text suchen, nicht nach anderen Elementen 🙂

    – Sarfraz

    8. Oktober 2010 um 18:55 Uhr

  • hmm, das funktioniert bei mir. Ich habe eine bs-ID zu #box3 div hinzugefügt, also sucht es nach der inneren Box. es erkannte immer noch das Leerzeichen, also zeigte es #Third … ich habe es nur “> 5” statt 0 gemacht und es funktioniert …. danke! =D

    – Alex

    8. Oktober 2010 um 19:23 Uhr

Benutzer-Avatar
Nick Craver

Für die aktualisierte Frage: Überprüfen Sie den getrimmten Text des Inneren <div>so was:

 if ($.trim($("#box3 div").html())) {
   $('#third').show();
 }  

Vorherige Antwort: Wenn Sie zeigen möchten, ob es hat irgendetwasdann prüfen :not() gegen :empty funktioniert:

 if ($("#box3:not(:empty)").length) {
   $('#third').show();
 }  

Wenn Sie nach Elementen suchen möchten (möglicherweise nicht nur Leerzeichen), verwenden Sie :has(*)so was:

 if ($("#box3:has(*)").length) {
   $('#third').show();
 }  

  • nein, funktioniert nicht … es gibt ein anderes div drin, also sieht es das vielleicht als etwas an? ich werde die html posten

    – Alex

    8. Oktober 2010 um 18:55 Uhr

  • @Alex – auf jeden Fall wird es das sehen, wenn Sie überprüfen möchten, ob etwas anders leer ist, brauchen wir den HTML-Code.

    – Nick Craver

    8. Oktober 2010 um 18:57 Uhr

Benutzer-Avatar
KKumar

Sie können auch den CSS3-Selektor verwenden :empty

div#empty-div:empty {
   display: none;
}

Das :empty selector zielt nur auf leere Elemente ab, ohne Leerzeichen.

Sie können auch die HTML-Länge in Ihrem Selektor überprüfen:

if ($("#box3").html().length) {
    $('#third').show();
}       

Trim kann verwendet werden, um die Länge zu überprüfen

$(document).ready(function(){
   if ($("#box3").html().trim().length > 0) {
     $('#third').show();
   }                                           
});

1175540cookie-checkwenn div Inhalt hat, zeige div

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy