php - jQueryでdivの幅を100%に変更するには?

Question

2 つの div が並んでいて、一方が存在しない場合は、もう一方の幅を 100% にしたいと考えています。

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

これが私のJavascript/jQueryです：

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

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

したがって、写真の div がない場合は、情報 div の幅を 100% にします。どうすればこれを達成できますか？

アップデート

写真の div が表示されていない場合、上記が機能し、情報 div が 100% に設定されます。しかし、ページのどこかに写真 div がある場合、隣に写真 div がなくても、情報 div は 100% に設定されません。

Answer 1

次のようなものを使用できます。

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

デモ

編集:私の更新された jsfiddle を参照してください。jQuery が期待どおりに機能しない理由は、グローバル スコアでクラスを参照しているためです。 、これはJqueryが再び登場するときです。更新されたコードでは、各反復でfind()関数を使用しています。スコープが反復要素のみに縮小されるため、これは現在の行にのみ影響します。

Answer 2

サーバー側で処理するのと同じくらい簡単かもしれないことをお勧めします。ロジックでは、1 つまたは 2 つの DIV があるかどうかに基づいて、割り当てる CSS クラスを変更するだけです。

<? if (hasPhotos) { ?>
    <div class="photo two-column left-column">...</photo>
    <div class="info two-column last-column">...</info>
<? } else { ?>
    <div class="info">...</info>
<? } ?>

Answer 3

Afaikは数値lengthを返すため、ゼロであることを確認する必要があります。あなたの if ステートメントは次のようになります。

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

Answer 4

ここに問題があります:

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

info div は class update_info ではなく、class info であるため、次のように変更します。

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