使用jQuery计算子对象的总宽度
使用jQuery计算子对象的总宽度
提问于 2009-06-18 23:12:49
我试着为这个问题找到一个可以理解的答案，但是放弃了。
为了让动态的内容(如博客文章和图片)在水平网站(如thehorizontalway.com上)中，你必须在像素中设置一个固定的正文宽度，对吧？因为您在其中使用了浮动元素，否则将根据浏览器的宽度对页面进行拆分和折回。
编辑！这个特定值可以用jQuery计算出来，感谢这一点:)在这个例子中，向总大小添加了一个附加值，该值可用于浮动元素之前的内容。现在body获得了动态宽度！
我最初的想法是让jQuery为我们计算：(‘每个帖子的宽度’*‘帖子的数量’)+ 250 (额外的内容)
HTML代码
<body style="width: ;"> <!-- Here we want a DYNAMIC value -->
<div id="container">
<div id="menu"></div> <!-- Example of extra content before the floats -->
<div class="post">Lorem</div>
<div class="post">Lorem</div>
<div class="post">Lorem</div> <!-- Floated elements that we want the sizes of -->
<div class="post">Lorem</div>
</div>
...
<!-- So if these posts were 300px exept the last that was 500px wide, then the BODY WIDTH should be ( 300+300+300+500 ) + 250 [#menu] = 1650px -->来自Alconja的结果和答案
$(document).ready(function() {
var width = 0;
$('.post').each(function() {
width += $(this).outerWidth( true );
});
$('body').css('width', width + 250);
});非常感谢！
回答 2
Stack Overflow用户
回答已采纳
发布于 2009-06-18 23:50:30
看起来你已经说对了.不过，还是有几个注意事项：
.outerWidth(true)包括填充和边距(因为您传递的是true)，所以没有必要尝试&在again..outerWidth(...)中只返回第一个元素的宽度，所以如果每个元素的大小不同，将其乘以帖子的数量将不会是总宽度的精确值。
考虑到这一点，像这样的东西应该会给你你想要的东西(保持你的250初始填充，我假设这是菜单和东西？)：
var width = 0;
$('.post').each(function() {
width += $(this).outerWidth( true );
});
$('body').css('width', width + 250);这有帮助吗，或者你有其他一些具体的问题(从你的问题中不是很清楚)？
Stack Overflow用户
发布于 2016-06-17 08:02:58
你可以用这一行代码来计算宽度，虽然比我想要的要长一点。
var width = $('.post').map(function(undefined, elem) {
return $(elem).outerWidth(true);
}).toArray().reduce(function(prev, curr) {
return prev + curr;
}, 0);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/1015669
复制相关文章
相似问题