使用jQuery计算children的总宽度 [英] Calculate total width of Children with jQuery
问题描述
我已尝试找到一个可以理解的答案，但放弃。
为了拥有 dymnamic 内容和图片）在横向网站（例如 thehorizontalway.com ），您必须设置一个固定的宽度为BODY在像素，对不对？
EDIT！ 因为您在其中使用浮动元素，否则会破坏和整理页面。 此特定值可以使用 jQuery 来计算，感谢:)在此示例中，将一个附加值添加到总大小中，可以使用对于浮动元素之前的内容。现在身体得到一个动态宽度！
我最初的想法是让jQuery为我们计算：
（'EACH POSTS WIDTH'*' '）+ 250（额外内容）
HTML代码
< body style =width：;> <！ - 我们想要一个DYNAMIC值 - >
< div id =container>
< div id =menu>< / div> <！ - 浮动广告之前的额外内容示例 - >
< div class =post> Lorem< / div>
< div class =post> Lorem< / div>
< div class =post> Lorem< / div> <！ - 浮动元素，我们想要的大小 - >
< div class =post> Lorem< / div>
< / div>所以如果这些帖子是300px的最后一个是500px宽，那么BODY WIDTH应该是（300 + 300 + 300 + 500）+ 250 [#menu ] = 1650px - >
来自Alconja的结果和答案
$（document）.ready（function（）{
var width = 0;
$（'。post' b width + = $（this）.outerWidth（true）;
}）;
$（'body'）css（'width'，width + 250）;
}
非常感谢！
- code> .outerWidth（true）包括填充& margin（因为你通过
true），所以没有必要尝试& -
.outerWidth（...）只返回第一个元素的宽度，因此，如果每个元素不同的大小，乘以帖子的数量不会是总宽度的准确值。
像这样应该给你你的后面（保持你的250初始填充，我认为是菜单&东西？）：
var width = 0;
$（'。post'）。each（function（）{
width + = $（this）.outerWidth（true）;
}）;
$（'body'）。css（'width'，width + 250）;
这是否有帮助，还是有其他一些具体问题从你的问题）？
I've tried finding an understandable answer to this, but given up.
In order to have dymnamic content (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.
EDIT! This specific value can be calculated with 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!
My initial thought was to have jQuery calculate this for us: ( 'EACH POSTS WIDTH' * 'NUMBER OF POSTS' ) + 250 (for the extra content)
HTML code
<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
$(document).ready(function() {
var width = 0;
$('.post').each(function() {
width += $(this).outerWidth( true );
});
$('body').css('width', width + 250);
});
Thanks so much!
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.
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?):
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)?
这篇关于使用jQuery计算children的总宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
