Question

我正在为一个在线课程做一个小项目，我需要使用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');
        }
    }
});

Answer 1

问题是：

CSS引导器应该是#container，因为您指的是它按ID。
此外，您的第一个循环中缺少semicolon
并且，div.unit应该在第二个内部定义，因为在每个循环中都要添加一个新的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');
        }
    }
});

参见 JSFiddle demo

Answer 2

Here是一个有效的例子。这里只是代码：

<强> HTML

<div id="container"></div>

<强> CSS

#container {
    background-color: red;
    height: 192px;
    width: 192px;
}

.unit {
    background-color: blue;
    height: 10px;
    width: 10px;
    margin: 1px;
    float: left;
}

<强>的jQuery

$(function() {
    for (var x = 0; x < 16; x++) {
        for (var y = 0; y < 16; y++) {
            $("<div>").addClass("unit").appendTo("#container");
        }
    }
});

Answer 3

元素不重叠。发生的事情是你只创建了一个并在循环中将它附加到容器两次。当然，只有一个出现，因为只有一个出现。

在for循环中创建并追加。您还必须修复原始代码中的一些语法错误：

$(document).ready(function() {

    for(var x = 0; x < 2; x++) {
        for(var y = 0; y < 2; y++) {
            var unit = $("<div class='unit' style='position:absolute'></div>");
            unit.appendTo('#container', {left: });
        }
    }
});

看看你有一个嵌套循环，我假设你正在尝试制作一个网格矩阵。由于html元素的浮动和折叠，此代码不会生成x x y网格。要正确创建网格，必须使用绝对定位样式指定x和y位置，并将计数乘以宽度。这实际上取决于因为你可以轻松填满你的主容器，而不是这样做。

尝试使用jQuery创建一个16x16的div网格，但div保持重叠

3 个答案: