javascript 如何使用 jQuery 将 div 的宽度更改为 100%？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17128443/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change width of div to 100% with jQuery?
提问by user2127833
I have 2 divs side by side and when one isn't there, I want the other to have a width of 100%.
我有 2 个并排的 div，当一个不存在时，我希望另一个的宽度为 100%。
while ($array = $query->fetch(PDO::FETCH_ASSOC)){
if (!empty($array['photoname'])){
echo '<div class="photo"></div>';
}
echo '<div class="info"></div>';
}
Here's my Javascript/jQuery:
这是我的 Javascript/jQuery：
$(document).ready(function() {
//check if photo div exists
if ($('.photo').length){
}else{
$('.info').css('width', '100%');
}
});
So if there is no photo div I want the info div to get a width of 100%. How can I achieve this?
因此，如果没有照片 div，我希望信息 div 的宽度为 100%。我怎样才能做到这一点？
UPDATE
更新
If I don't have any photo divs showing, the above works and sets info divs to 100%. But when I have a photo div anywhere on the page, then none of the info divs are set to 100% even if they dont have a photo div next to them.
如果我没有显示任何照片 div，上面的工作并将信息 div 设置为 100%。但是，当我在页面上的任何位置都有照片 div 时，即使它们旁边没有照片 div，也不会将任何信息 div 设置为 100%。
回答by isJustMe
You can use something like this:
你可以使用这样的东西：
HTML
HTML
<div class="main">
<div class="photo">a</div> <div class="info">a</div>
</div>
JS
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
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%;
}
EDIT: Please see my updated jsfiddle, the reason why your jQuery is not working as expected is because you refer to class in a global score, as you want to modify your divs in a row basis you will have to somehow iterate trough each of them, this is when Jquery comes to the play again, in the updated code I'm using the find() function on each iteration, this will affect only the current row as the scope is reduced to the iterated element only.
编辑：请查看我更新的 jsfiddle，你的 jQuery 没有按预期工作的原因是因为你在全局分数中引用了类，因为你想连续修改你的 div，你必须以某种方式迭代它们中的每一个，这是当 Jquery 再次发挥作用时，在更新的代码中，我在每次迭代中都使用 find() 函数，这将仅影响当前行，因为范围缩小到仅迭代元素。
回答by tvanfosson
I would suggest that it might be just as easy to handle it server-side. In your logic, simply change the CSS class you assign based on whether you have one or two DIVs.
我建议在服务器端处理它可能同样容易。在您的逻辑中，只需根据您有一个还是两个 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>
<? } ?>
回答by Skrivener
There's a problem here:
这里有一个问题：
$('.update_info').css('width', '100%');
Your info div is not class update_info, it's class info, so change to:
您的信息 div 不是类 update_info，而是类信息，因此更改为：
$('.info').css('width', '100%');
回答by Teetrinker
Afaik lengthreturns a number, so you have to check for it to be zero.
Your if statement would look like this then:
Afaiklength返回一个数字，因此您必须检查它是否为零。您的 if 语句将如下所示：
if ($('.photo').length == 0){ ...
if ($('.photo').length == 0){ ...
