Как изменить ширину div на 100% с помощью jQuery?

Question

У меня есть 2 divs бок о бок, а когда его нет, я хочу, чтобы у другого была ширина 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%'); 
    } 
}); 

Так что, если нет фото ДИВ Я хочу Информация ДИВ, чтобы получить ширину 100%. Как я могу это достичь?

UPDATE

Если у меня нет фото дивы, показывающей, вышеуказанные работы и устанавливает информацию дивы до 100%. Но когда у меня есть фото-div в любом месте страницы, ни один из информационных divs не установлен на 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

EDIT: Пожалуйста, смотрите мой обновленный jsfiddle, причина, почему ваш Jquery не работает, как ожидалось, потому что вы обратитесь к классу в глобальной оценки, как вы хотите изменить свои дивы в строке основе вы будете нужно как-то перебирать каждую из них, это когда Jquery снова возвращается к игре, в обновленном коде я использую функцию find() на каждой итерации, это повлияет только на текущую строку, поскольку область действия сводится к только итерационный элемент.

Answer 2

Там проблема здесь:

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

Ваша информация ДИВ не класс update_info, это класс инфо, так изменится:

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

Answer 3

Я бы предположил, что это может быть столь же легко обрабатывайте его на стороне сервера. В вашей логике просто измените класс CSS, который вы назначаете, на основе того, есть ли у вас один или два DIV.

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

Answer 4

Afaik length возвращает номер, поэтому вы должны проверить его на нуль. Ваш если заявление будет выглядеть следующим образом, то:

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