用jQuery计算Children的总宽度

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (59)

我最初的想法是让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);
});
提问于
用户回答回答于

看起来你已经明白了......虽然有一些不对:

  • .outerWidth(true)包括填充和边距(因为你传递过来true),所以不需要再次尝试添加。
  • .outerWidth(...) 仅返回第一个元素的宽度,因此如果每个元素的大小不同,则将其与帖子数相乘将不会是总宽度的准确值。

考虑到这一点,这样的事情应该会给你后面的东西:

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

你可以用这条线来计算宽度,虽然比我想要的要长一点。

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

扫码关注云+社区

领取腾讯云代金券