我正在为一个在线类(class)做一个小元素，我需要使用 jQuery 创建一个 16x16 的 div 网格来操作 DOM。问题是，div 重叠，我该如何解决？我是初学者，所以请对我的工作非常批评，这将是一个巨大的帮助，谢谢。
<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="EASP.css">
<head>
<title></title>
</head>
<body>
<div id="container"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="EASP.js"></script>
</body>
</html>
#container {
background-color: red;
height: 192px;
width: 192px;
}
.unit {
background-color: blue;
height: 10px;
width: 10px;
margin: 1px;
display: inline-block;
}
$(document).ready(function() {
var unit = $("<div class='unit'></div>");
for(var x = 0; x < 2 x++) {
for(var y = 0; y < 2; y++) {
unit.appendTo('container');
}
}
});
最佳答案
问题是:
- CSS 选择器应该是
#container因为你正在引用它 按身份证。 - 此外，第一个循环中缺少一个
分号 - 并且，
div.unit应该在第二个 for 中定义，因为在每个循环中您要添加一个新的DIV元素:
应用这些更改后，此代码应该可以工作:
$(document).ready(function() {
for(var x = 0; x < 16; x++) {
for(var y = 0; y < 16; y++) {
var unit = $("<div class='unit'></div>");
unit.appendTo('#container');
}
}
});
关于javascript - 尝试使用 jQuery 创建一个 16x16 的 div 网格，但 div 保持重叠，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31793518/