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> 

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

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

View jsFiddle

Answer 1

При определении переменной MinWidth вы забыли установить его в 0. Вы также забыли добавить «точек» за номером при настройке 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'); 
    }); 
});