使用JavaScript创建一个3 X 3的网格/ jquery
我有一个名为box的div类,这个div形成一个square.I想重复这个div以形成一个3 X 3的网格。我该如何做到这一点for循环在JavaScript/jQuery中?使用JavaScript创建一个3 X 3的网格/ jquery
.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 class="parent">
<div class="toCopy">div that i have to clone</div>
</div>
$(".toCopy").clone().appendTo(".parent");
结果:
<div class="parent">
<div class="toCopy">div that i have to clone</div>
<div class="toCopy">div that i have to clone</div>
</div>
,如果你不上课的名称,您可以遍历使用jQuery遍历DOM :https://api.jquery.com/category/traversing/
无论如何,我建议你检查API的操作部:https://api.jquery.com/category/manipulation/
感谢@Drway这个工程,但是这不会创建3 X 3的网格。我如何使用多个for循环形成该结构。 – HarshMakadia
我知道,我只是给你克隆的解决方案。你必须嵌套2,这很简单。如果你不能,我会给你解决方案。 – 2015-10-05 12:28:21
你想是这样的:
http://jsfiddle.net/sqz75b9g/8/
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>");
}
}
})
下面是一个简单的(应该是容易理解的)解决方案,将其更改为您根据自己的需要希望:
注:在未来得不到你的问题下投票请按照下列links。 ..
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%;
}
JS:
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);
}
}
HTML:
<div>
<div id="boxParent"></div>
</div>
<div>
<button onclick="makeBlocks();">MAKE BLOCKS</button>
</div>
编辑: 这里有一个JSFiddle链接
您已经尝试了什么? –
我试图使用append(),但它不工作! @sarjan Desai – HarshMakadia
显示应该是:'inline-block'而不是'block-inline' – EaziLuizi