Рассчитайте общую ширину детей с помощью jQuery - PullRequest
Новая
       38

Рассчитайте общую ширину детей с помощью jQuery

17 голосов
/ 19 июня 2009

Я пытался найти понятный ответ на это, но бросил.

Чтобы иметь dymnamic контент (например, сообщения в блоге и изображения) на горизонтальном веб-сайте (как на thehorizontway.com ), вы должны установить фиксированный ширина для тела в пикселях, верно? Поскольку вы используете внутри него плавающие элементы, которые в противном случае сломали бы и обернули страницу, в зависимости от ширины браузера.

РЕДАКТИРОВАТЬ! Это конкретное значение может быть вычислено с 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);
});

Большое спасибо!

Ответы [ 2 ]

36 голосов
/ 19 июня 2009

Похоже, вы все поняли ... пара замечаний:

  • .outerWidth(true) включает отступы и поля (поскольку вы передаете true), поэтому нет необходимости пытаться добавить это снова.
  • .outerWidth(...) возвращает только ширину первого элемента, поэтому, если каждый элемент имеет свой размер, умножение его на количество сообщений не будет точным значением общей ширины.

Имея это в виду, что-то подобное должно дать вам то, к чему вы стремитесь (сохраняя ваши 250 начальных отступов, что, я полагаю, предназначено для меню и прочего?): 

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

Помогает ли это, или есть какая-то другая проблема, с которой вы столкнулись (не совсем понятно из вашего вопроса)?

0 голосов
/ 17 июня 2016

Вы можете рассчитать ширину с помощью этой однострочника, хотя и чуть длиннее, чем мне бы хотелось. 

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