jQueryの - 計算のminWidth

Question

<menu>の内部全 <command>要素の合計幅を計算することにより <menu>の min-Widthを設定しよう

View jsFiddle

。私はそれを把握するために全力を試してみましたjQuery次

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

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

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

div.space私はコードに行くよちょうどセパレーターさ：これはHTMLの形式は

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

     var minWidth; 

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

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

コマンドを完全な長さに分割することができます。

現在のところ、自分のコードにエラーが発生していません。

View jsFiddle

Answer 1

あなたは0にそれを設定するのを忘れてのminWidth変数を定義するときにも、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'); 
    }); 
});