jQuery - 计算minWidth

Question

  

View jsFiddle

尝试通过计算min-Width内所有<menu>元素的总宽度来设置<command>的{​​{1}}。我尽力在以下<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> 只是一个分隔符，我稍后会编码以在整个长度上分割命令。

我的代码目前没有错误。

  

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/

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');
    });
});