使用 jQuery 计算 Children 的总宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1015669/
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
Calculate total width of Children with jQuery
提问by elundmark
I've tried finding an understandable answer to this, but given up.
我试图找到一个可以理解的答案，但放弃了。
In order to have dymnamiccontent (like blog posts and images) in a horizontal website(like on thehorizontalway.com) you must set a fixed width for the BODY in pixles, right? Because you use floated elements inside it that otherwise would break and wrap down the page, depending on the browsers width.
为了在水平网站（如thehorizontalway.com）中拥有动态内容（如博客文章和图像），您必须以像素为单位为 BODY 设置固定宽度，对吗？因为您在其中使用了浮动元素，否则会根据浏览器的宽度破坏和环绕页面。
EDIT!This specific value can be calculatedwith jQuery, thanks for that :) In this example, an additional value is added to the total size, which can be used for content before the floated elements. Now the body gets a dynamic width!
编辑！这个特定的值可以用jQuery计算，谢谢:) 在这个例子中，一个额外的值被添加到总大小，它可以用于浮动元素之前的内容。现在身体获得了动态宽度！
My initial thought was to have jQuery calculate this for us: ( 'EACH POSTS WIDTH' * 'NUMBER OF POSTS' ) + 250 (for the extra content)
我最初的想法是让 jQuery 为我们计算：( 'EACH POSTS WIDTH' * 'NUMBER OF POSTS' ) + 250（用于额外内容）
HTML code
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 -->
The result and answer from Alconja
来自 Alconja 的结果和答案
$(document).ready(function() {
var width = 0;
$('.post').each(function() {
width += $(this).outerWidth( true );
});
$('body').css('width', width + 250);
});
Thanks so much!
非常感谢！
回答by Alconja
Looks like you've got it pretty much right... a couple of notes though:
看起来你说得很对……不过有几个注意事项：
.outerWidth(true)includes the padding & margin (since you're passingtrue), so there's no need to try & add that in again..outerWidth(...)only returns the width of the first element, so if each element is a different size, multiplying this by the number of posts won't be an accurate value of total width.
.outerWidth(true)包括填充和边距（因为您正在通过true），因此无需再次尝试添加。.outerWidth(...)仅返回第一个元素的宽度，因此如果每个元素的大小不同，将其乘以帖子数将不是总宽度的准确值。
With that in mind something like this should give you what you're after (keeping your 250 initial padding, which I assume is for menus & things?):
考虑到这一点，这样的事情应该给你你想要的东西（保持你的 250 初始填充，我认为这是用于菜单和东西？）：
var width = 0;
$('.post').each(function() {
width += $(this).outerWidth( true );
});
$('body').css('width', width + 250);
Does that help, or is there some other specific problem you're having (wasn't quite clear from your question)?
这有帮助，还是您遇到了其他一些特定问题（您的问题不太清楚）？
回答by smac89
You can calculate the width with this one-liner, albeit a tad longer than I would have liked.
你可以用这个单线来计算宽度，虽然比我想要的要长一点。
var width = $('.post').map(function(undefined, elem) {
return $(elem).outerWidth(true);
}).toArray().reduce(function(prev, curr) {
return prev + curr;
}, 0);
