web-dev-qa-db-ja.com

jQueryを使用して子の合計幅を計算する

私はこれに対する理解できる答えを見つけようとしましたが、あきらめました。

dymnamicコンテンツ（ブログ投稿や画像など）をhorizo​​ntal website（ thehorizo​​ntalway.com など）に含めるには、固定を設定する必要がありますBODYの幅（ピクセル単位）ですね。 ブラウザの幅によっては、ページを壊して折り返すフロート要素を内部で使用しているためです。

EDIT！この特定の値は計算でjQuery、ありがとうございます:)この例では、追加の値は合計サイズに追加されます。これは、浮動要素の前のコンテンツに使用できます。これで、ボディは動的な幅になります。

私の最初の考えは、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);
});

本当にありがとう！

jquerycssdynamiclayout
17
elundmark

あなたはそれをかなり正しく持っているように見えます...しかしいくつかのメモ：

  • .outerWidth(true)にはパディングとマージンが含まれているため（trueを渡しているため）、それを再試行して追加する必要はありません。
  • .outerWidth(...)は最初の要素の幅のみを返すため、各要素のサイズが異なる場合、これに投稿の数を掛けても、合計幅の正確な値にはなりません。

それを念頭に置いて、このようなものはあなたが求めているものをあなたに与えるはずです（あなたの250の最初のパディングを維持します、それはメニューと物のためであると私は思いますか？）：

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

それは役に立ちますか、それともあなたが抱えている他の特定の問題がありますか（あなたの質問からは完全に明確ではありませんでした）？

36
Alconja

私が望んでいたより少し長いですが、あなたはこのワンライナーで幅を計算することができます。

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