Question

我有两个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%;
    }

DEMO

编辑：请看我更新的jsfiddle，你的jQuery没有按预期工作的原因是因为你在全局分数中引用了类，因为你想要连续修改你的div，你将不得不以某种方式迭代通过它们中的每一个，这是当Jquery再次进入游戏时，在更新的代码中我在每次迭代时使用find（）函数，这将仅影响当前行，因为范围被简化为迭代元素只有。

Answer 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

这里有一个问题：

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

您的信息div不是类update_info，它是类信息，因此更改为：

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

Answer 4

Afaik length会返回一个数字，因此您必须检查它是否为零。你的if语句如下所示：

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

如何使用jQuery将div的宽度更改为100％？

4 个答案: