使用jQuery计算Children的总宽度

我试过找到一个可以理解的答案，但放弃了。

为了在横向网站 （如thehorizo​​ntalway.com ）上拥有dymnamic内容（如博客文章和图片），你必须为像素中的BODY设置一个固定的宽度，对吧？ 因为你在其中使用浮动元素，否则会破坏和包裹页面，具体取决于浏览器的宽度。

编辑！ 这个特定的值可以用jQuery 计算 ，多亏了:)在这个例子中，一个额外的值被添加到总大小，可以用于浮动元素之前的内容。 现在身体得到了动态的宽度！

我最初的想法是让jQuery为我们计算：（’每个post宽度’*’号码数’）+ 250（额外内容）

HTML代码

  
 
  
Lorem
 
Lorem
 
Lorem
  
Lorem
 
 ...  

Alconja的结果和答案

 $(document).ready(function() { var width = 0; $('.post').each(function() { width += $(this).outerWidth( true ); }); $('body').css('width', width + 250); }); 

非常感谢！

Answer 1

看起来你已经非常正确……但是有两点注意事项：

• .outerWidth(true)包括填充和边距（因为你传递的是true ），所以没有必要再尝试添加它。
• .outerWidth(...)仅返回第一个元素的宽度，因此如果每个元素的大小不同，则将其乘以post数将不是总宽度的准确值。

考虑到这一点，这样的东西会给你你想要的东西（保持你的250初始填充，我假设是菜单和东西？）：

 var width = 0; $('.post').each(function() { width += $(this).outerWidth( true ); }); $('body').css('width', width + 250); 

这有帮助吗，或者你有其他一些具体问题（你的问题不是很清楚）？

Answer 2

你可以用这个单线计算宽度，虽然比我想要的要长一点。

 var width = $('.post').map(function(undefined, elem) { return $(elem).outerWidth(true); }).toArray().reduce(function(prev, curr) { return prev + curr; }, 0);