jQueryを使って同じ高さと幅を設定できないのはなぜですか？

Question

jQueryを使用してスケッチパッドを構築し、各divグリッドの幅と高さを動的に設定したいと考えています。

ただし、結果の高さと幅のサイズが異なります。 JQueryコードから、私は16 * 16 divブロックを正常に作成したことを理解しています。 selector.css(width:function(){})を使って高さと幅を割り当てます。

この結果、同じサイズのブロックが16×16グリッドになることが予想されます。ただし、異なるサイズのブロックが表示されます。私はこれがどうして起こるのかわからない、誰かが私を啓発することができますか？

var input = 16; 
 

 

 
$(document).ready(function(){ 
 

 
\t 
 
    for(var i = 0; i<input*input;i++){ 
 
\t $('.wrapper').append("<div></div>"); 
 
    } 
 

 
\t $('.wrapper').find('div').css({ 
 
    width: function(input) { 
 
     return 200/input; 
 
    }, 
 
    height: function(input) { 
 
    return 200/input; 
 
    } 
 
    }); 
 
\t $('.wrapper').find('div').addClass('grid'); 
 
\t $('.wrapper').find('div').on('mouseenter',function(){ 
 
\t $(this).addClass('highlight'); 
 

 
}); 
 

 
});

.wrapper{ 
 
\t width: 900px; 
 
\t height: 900px; 
 
\t margin: 0 auto; 
 

 
} 
 

 
.grid{ 
 
\t border: 1px solid black; 
 
\t display: inline-block; 
 
\t margin: 2px 2px; 
 
} 
 

 
.highlight{ 
 
\t background-color: blue; 
 

 
} 
 

 
#button{ 
 
\t width: 900px; 
 
\t margin: 0 auto; 
 
} 
 

 
button{ 
 
\t display: block; 
 
\t margin: auto; 
 
} 
 

 
body{ 
 
\t background-color: grey; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
\t <link rel="stylesheet" type="text/css" href="style.css"> 
 
\t <script type="text/javascript" src = "sketchpad.js"></script> 
 

 

 

 
\t <div class="wrapper"></div>

Answer 1

$('.wrapper').find('div').width(200/input); 
    $('.wrapper').find('div').height(200/input); 

    /*$('.wrapper').find('div').css({ 
    width: function(input) { 
     return 200/input; 
    }, 
    height: function(input) { 
    return 200/input; 
    } 
    });*/ 

reomveコードセクションをコメントし、コードセクション上に追加します。

Answer 2

$('.wrapper').find('div').css({ 
    width: function(input) { 
     return 200/input; 
    }, 
    height: function(input) { 
    return 200/input; 
    } 
    }); 

幅と高さの単位を忘れてしまったと思います。

$('.wrapper').find('div').css({ 
     width: function(input) { 
      return 200/input + 'px'; 
     }, 
     height: function(input) { 
     return 200/input + 'px'; 
     } 
     }); 

動作するはず

Answer 3

問題は、あなたが指定したwidth機能である：documentationによると

width: function(input) { return 200/input; }, 

この機能：

は、要素のインデックス位置を受け取りますセット内に古い の幅を引数として指定します。

したがって、パラメータinputにはdivのインデックス位置が含まれています。あなたが見えないブロック（位置0）を参照してください理由です0、1、2など、200の高さ/幅（位置1）をしている、など

ソリューションの代わりに変数を使用することです幅を設定する関数：

var block_width = 200/input; 

$('.wrapper').find('div').css({ 
    width: block_width, 
    height: block_width 
});