Question

如果在内部加载另一个DIV（通过PHP），如何使用DIV容器的Jquery更改宽度？

这是我的HTML代码

<div id="container">
    <div class="item"> Content 1 </div>
</div>

现在，我有一个用于填充每页的“容器”。另一个页面可能包含此HTML代码

<div id="container">
     <div class="item"> Content 1 </div>
     <div class="item"> Content 2 </div>
     <div class="item"> Content 3 </div>
</div>

“item”有浮动：左; 我想连续所有“项目”。如何在里面加载“item”时动态更改“容器”宽度？

我正在使用滚动条Jquery插件来滚动div。

请帮忙！

Answer 1

你需要这样的东西吗？

$(document).ready(function(){
    var youtWidth = 100;
    $('#container').width($('#container .item').length * yourWidth);
})

这会计算#container中的元素，并将#container width设置为元素数量的倍数。在这个例子中，我为每个元素保留100px。

的Fabio

Answer 2

您可以计算子项的宽度并将总计应用于容器，如下所示：

var contentWidth = 0;

$('#container .item').each( function() {
    // outerWidth(true) includes margins
    contentWidth += $(this).outerWidth(true);
});

$('#container').width( contentWidth );

演示：http://jsfiddle.net/jtbowden/SQASY/

<小时/> 或者，使用一些基本的CSS，你可以完全避免使用JavaScript：

演示：http://jsfiddle.net/jtbowden/YBKxn/1/

Answer 3

如果物品的宽度不同，您可以随时执行：

var totalWidth = 0;
$('#container').children('.item').each(function(){
   totalWidth += $(this).outerWidth();
});

$('#container').width(totalWidth);

Jquery - 在内部加载另一个DIV时动态调整容器DIV宽度容器的大小

3 个答案: