jQuery - 计算 minWidth

Question

View 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>

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

我的代码目前没有错误。

View jsFiddle

Answer 1

定义 minWidth 变量时，您忘记将其设置为 0。您还忘记在设置 CSS 时在数字后面添加“px”。这是您的代码，正在运行:

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