为什么我不能使用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功能：

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

按照documentation此功能：

接收元素的索引位置在集合中和旧的宽度作为参数 。

因此，参数input包含div的索引位置，例如， 0，1，2等这就是为什么你看到具有不可见的块（位置0），具有的高度/宽度200（位置1）等

的解决方案是使用一个变量，而不是一个函数来设置宽度：

var block_width = 200/input; 

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