2

我有 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%。

4

4 回答 4

5

你可以使用这样的东西：

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 无法按预期工作的原因是因为您在全局分数中引用了类，因为您想连续修改您的 div，您将不得不以某种方式迭代它们中的每一个，这是 Jquery 再次发挥作用的时候，在更新的代码中，我在每次迭代中使用 find() 函数，这将仅影响当前行，因为范围缩小到仅迭代元素。

于 2013-06-15T22:29:08.687 回答
1

我建议在服务器端处理它可能同样容易。在您的逻辑中，只需根据您是否有一个或两个 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>
<? } ?>
于 2013-06-15T22:23:16.743 回答
0

这里有一个问题：

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

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

$('.info').css('width', '100%');
于 2013-06-15T22:23:01.347 回答
0

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

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

于 2013-06-15T23:00:53.230 回答