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，也没有一个信息 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%;
    }

DEMO

编辑:请查看我更新的 jsfiddle，您的 jQuery 未按预期工作的原因是因为您在全局分数中引用类，因为您想要连续修改您的 div，您将不得不以某种方式遍历它们中的每一个，这是 Jquery 再次出现的时候，在更新的代码中我在每次迭代中使用 find() 函数，这将仅影响当前行，因为范围缩小到迭代元素只有。