Question

View jsFiddle

Attempting to set the min-Width of a <menu> by calculating the total width of all the <command> elements inside of the <menu>. I tried my best to figure it out in the following jQuery:

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

        var minWidth;

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

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

This is the format for the HTML:

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

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

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

The div.space is just a seperator that I’m going to code later to split the commands across the full length.

My code currently comes up with no errors.

View jsFiddle

Answer 1

When defining the minWidth variable you forgot to set it to 0. You also forgot to add ‘px’ behind the number when setting the CSS. Here’s your code, working:

$(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/