So ändern Sie die Breite des div auf 100% mit jQuery?

Ich habe 2 divs nebeneinander, und wenn einer nicht da ist, ich will, dass die anderen eine Breite von 100%. 

while ($array = $query->fetch(PDO::FETCH_ASSOC)){    
     if (!empty($array['photoname'])){
          echo '<div class="photo"></div>';
     }
        echo  '<div class="info"></div>';
}

Hier ist mein Javascript/jQuery:

$(document).ready(function() {
    //check if photo div exists
    if ($('.photo').length){

    }else{
        $('.info').css('width', '100%');
    }
});

Also, wenn es keine Foto-div möchte ich das info-div zu bekommen eine Breite von 100%. Wie kann ich das erreichen?

UPDATE

Wenn ich nicht über jedes Foto divs zeigen, den oben genannten Werken und sets info divs auf 100%. Aber wenn ich ein Foto div irgendwo auf die Seite, dann wird keiner von der info-divs auf 100% gesetzt, auch wenn Sie nicht über ein Foto, div neben Ihnen.

InformationsquelleAutor user2127833 | 2013-06-15
  1. 4

    Können Sie so etwas wie dieses:

    HTML

    <div class="main">
<div class="photo">a</div> <div class="info">a</div>
</div>

    JS

    $(document).ready(function() {
    //check if photo div exists
    $( ".main" ).each(function( index ) {
       var thisPhoto = $(this).find('.photo').html();
        if(thisPhoto==undefined){
            
            $(this).find('.info').css('width', '100%');
        }    
     });
    
        
});

    CSS

    .main{
        display:block;
        color:red;
        width:200px;
        height:200px;
    }
    .photo{
        float:left;
         width:50%;
        display:block;
        background:red;
        height:100%;
    }
    .info{
        float:left;
         width:50%;
        display:block;
        background:red;
        height:100%;
    }

    DEMO

    EDIT: Bitte siehe meine aktualisierte jsfiddle, der Grund, warum Ihr jQuery funktioniert nicht wie erwartet ist, weil Sie sich beziehen auf die Klasse in einer globalen Partitur, wie Sie wollen, ändern Sie Ihre divs in einer Zeile, die basis, die Sie haben, um irgendwie zu Durchlaufen Trog jeder von Ihnen, das ist, wenn Jquery kommt das Spiel wieder in den aktualisierten code, den ich verwende die find () - Funktion, die bei jeder iteration, dies wirkt sich nur auf die aktuelle Zeile, wie der Umfang wird reduziert, um die iterierten element nur.

    • Es muss nicht funktionieren, überprüfen Sie bitte meine Antwort, $('.photo').length immer wieder 1 und wird wahr sein.
    • du hast Recht, werde ich editieren
    • if ($('.photo').html().length){ nicht für mich arbeiten. Ich entfernte das Foto und div setzen alert('hi'); unter else aber es hat nicht Benachrichtigen.
    • überprüfen Sie die aktualisierte demo, ich änderte es ein bisschen und wenn Sie es ausführen, ohne die div warnt
    • die $('.photo').hide(); ist nicht notwendig, meine PHP wieder. Und habe ich entfernt .html() und es machte mich dieser Zeit. Aber bitte, mein update oben, vielleicht hilft es ja? Ich denke, das jquery ist nicht die überprüfung aller divs, weil es ist eine while-Schleife, so dass es mehrere divs mit diesen Klassen.
    • Sie können prüfen, ob ein update für eine Klärung
    • Vielen Dank es funktioniert!!! Was bedeutet function (index) tun vs function()
    • Der index ist nur eine variable enthält die Anzahl der iteration, beispielsweise für das erste element, an das es die Werte 0, der zweite 1 und so weiter.. es ist in diesem bestimmten Beispiel sind wir nicht mit ihm konnte man es entfernen

    InformationsquelleAutor isJustMe
  2. 1

    Ich würde vorschlagen, dass es vielleicht genau so leicht zu handhaben it-server-Seite. In Ihrer Logik, ändern Sie einfach die CSS-Klasse zuzuweisen, je nachdem ob man ein oder zwei DIVs.

    <? if (hasPhotos) { ?>
    <div class="photo two-column left-column">...</photo>
    <div class="info two-column last-column">...</info>
<? } else { ?>
    <div class="info">...</info>
<? } ?>
    • Ich könnte dies tun, aber ich wollt eigentlich nur wissen, warum die Jquery funktioniert nicht jetzt...
    InformationsquelleAutor tvanfosson
  3. 0

    Gibt es hier ein problem:

    $('.update_info').css('width', '100%');

    Ihre info-div ist nicht Klasse update_info, es ist Klasse info, so zu ändern:

    $('.info').css('width', '100%');
    InformationsquelleAutor Skrivener
  4. 0

    Afaik length gibt eine Zahl zurück, so haben Sie zu prüfen, für die es null sein.
    Ihre if-Anweisung würde dann so Aussehen:

    if ($('.photo').length == 0){ ...

    • Sie muss nicht explizit überprüfen if(x==0), wenn x numerisch ist, weil wenn() wertet zu true für alle nicht-null-Zahl
    InformationsquelleAutor Teetrinker
Schreibe einen Kommentar