JQuery - Рассчитать minWidth

Question

Просмотр jsFiddle

Попытка установить min-Width для <menu> путем вычисления общей ширины всех элементов <command> внутри <menu>. Я старался изо всех сил, чтобы понять это в следующем jQuery:

$(document).ready(function() {
    $('menu').each(function() {

        var minWidth;

        $('menu command').each(function() {
            minWidth = minWidth + $(this).outerWidth(); 
        });

        $(this).css('min-width', minWidth);
    });
});

Это формат для HTML:

<menu>
    <command class="less" />
    <command class="more" />

    <div class="space"></div>

    <command class="save" />
    <command class="vote" />
    <command class="send" />
</menu>

div.space - это просто разделитель, который я собираюсь написать позже, чтобы разделить команды по всей длине.

Мой код в настоящее время работает без ошибок.

Просмотр jsFiddle

Answer 1

При определении переменной minWidth вы забыли установить ее равной 0. Вы также забыли добавить «px» за числом при настройке CSS. Вот ваш код, работающий:

$(document).ready(function() {
    $('menu').each(function() {

        var minWidth = 0;

        $('menu command').each(function() {
            minWidth = minWidth + $(this).outerWidth();
        });

        $(this).css('min-width', minWidth + 'px');
    });
});

http://jsfiddle.net/kkBRE/5/

Answer 2

Похоже, вам необходимо учитывать поля и отступы команд

Попробуйте этот код

$(document).ready(function() {
    $('menu').each(function() {

        var minWidth = 0;

        $('menu command').each(function() {
            minWidth = minWidth + ($(this).width());
        });
        minWidth = minWidth+35;

        $(this).css('min-width', minWidth + 'px');
    });
});