使用Javascript/jquery创建一个3 X 3的网格

我有一个名为box的div类，这个div形成一个正方形。我想重复这个div，以形成一个3 X 3的网格。如何在javascript/jquery中使用for循环来实现这一点

.box {
    background: #9E9E9E;
    border:black 1px solid;
    width: 180px;
    height:180px;
    margin:0px auto;
    margin-top:0px;
    cursor:pointer;
    display: inline-block;
    float: left;
}

---

我给你们一个起点：

我必须克隆的div

$（“.toCopy”）.clone（）.appendTo（“.parent”）；

结果:

我必须克隆的div
我必须克隆的div

如果没有类名，可以使用jquery遍历来遍历dom：

---

无论如何，我建议您检查api的操纵部分：

您想要这样的东西吗：

HTML

<div class="rows">
    <div class="row0"></div>
    <div class="row1"></div>
    <div class="row2"></div>
</div>  

JQuery代码：

$(function() {
    for(var row=0;row<3;row++)
    {
        for(var col=0;col<3;col++)
        {
            $(".row"+row).append("<div class='box'></div>");
        }
    }
})

$（函数（）{
对于（var row=0；row，这里有一个简单（应该很容易理解）的解决方案，根据您自己的需要进行更改：

注意：今后，为了不让您的问题被否决，请遵循以下内容

CSS:

    .box {
        background: #9E9E9E;
        border: black 1px solid;
        width: 180px;
        height: 180px;
        margin: 0 auto;
        margin-top: 0;
        cursor: pointer;
        display: inline-block;
        float: left;
    }

    .row {
        display: block;
        float:left;
        width:100%;
    }

    function makeBlocks() {
        for (var i = 0; i < 3; i++) {
            var row = document.createElement('div');
            row.className = "row";
            for (var j = 0; j < 3; j++) {
                var box = document.createElement('div');
                box.className = "box";
                row.appendChild(box);
            }                
            document.getElementById('boxParent').appendChild(row);
        }
    }

<div>
    <div id="boxParent"></div>
</div>
<div>
    <button onclick="makeBlocks();">MAKE BLOCKS</button>
</div>

JS:

    .box {
        background: #9E9E9E;
        border: black 1px solid;
        width: 180px;
        height: 180px;
        margin: 0 auto;
        margin-top: 0;
        cursor: pointer;
        display: inline-block;
        float: left;
    }

    .row {
        display: block;
        float:left;
        width:100%;
    }

    function makeBlocks() {
        for (var i = 0; i < 3; i++) {
            var row = document.createElement('div');
            row.className = "row";
            for (var j = 0; j < 3; j++) {
                var box = document.createElement('div');
                box.className = "box";
                row.appendChild(box);
            }                
            document.getElementById('boxParent').appendChild(row);
        }
    }

<div>
    <div id="boxParent"></div>
</div>
<div>
    <button onclick="makeBlocks();">MAKE BLOCKS</button>
</div>

函数makeBlocks（）{
对于（变量i=0；i<3；i++）{
var行=document.createElement（'div'）；
row.className=“row”；
对于（var j=0；j<3；j++）{
var-box=document.createElement（'div'）；
box.className=“box”；
行。追加子项（框）；
}                
document.getElementById（'boxParent'）.appendChild（行）；
}
}

HTML:

    .box {
        background: #9E9E9E;
        border: black 1px solid;
        width: 180px;
        height: 180px;
        margin: 0 auto;
        margin-top: 0;
        cursor: pointer;
        display: inline-block;
        float: left;
    }

    .row {
        display: block;
        float:left;
        width:100%;
    }

    function makeBlocks() {
        for (var i = 0; i < 3; i++) {
            var row = document.createElement('div');
            row.className = "row";
            for (var j = 0; j < 3; j++) {
                var box = document.createElement('div');
                box.className = "box";
                row.appendChild(box);
            }                
            document.getElementById('boxParent').appendChild(row);
        }
    }

<div>
    <div id="boxParent"></div>
</div>
<div>
    <button onclick="makeBlocks();">MAKE BLOCKS</button>
</div>


制造积木

编辑：
这里有一个链接
您尝试了什么？我正在尝试使用append（）但是它不起作用！@sarjan Desaidisplay应该是：'inline block'而不是'block-inline'，我做了更改@EaziLuiziTelling us它不起作用告诉我们什么；给我们看你的代码，并解释它不起作用的方式。它是如何失败的？它哪里出错了？谢谢@Drway这是可行的，但这不会创建3 X 3网格。我如何形成这个结构是的，使用多个for循环。我知道，我刚刚给了你克隆的解决方案。你必须嵌套2个for，这很简单。单独尝试，如果你不能，我会给你解决方案。