如何通过jQuery添加div的网络?

时间:2013-12-19 19:08:15

标签: javascript jquery css

您好我为网络浏览器执行拼字游戏。

我需要做的是为字符添加div的网络,因此输出效果应该是这样的:

 <div id="a1"></div> <div id="a2"></div>  <div id="a3"></div>  <div id=a4"></div>    <div id="a4"></div>  
 <div id="b1"></div>  <div id="b2"></div>  <div></div>  <div></div>  <div></div>  
 <div></div>  <div></div>  <div></div>  <div></div>  <div></div>  
 <div></div>  <div></div>  <div></div>  <div></div>  <div></div>  
 <div></div>  <div></div>  <div></div>  <div></div>  <div></div> 

我想知道如何在jquery中实现类似的东西,我已经通过循环中的append方法尝试了它:

( var i =  0 ; i < 15; i++)
    {
     $("#droppable").append("<div></div>")....
    }

但是我的潜水已经相互替换......

更改css也不会产生结果。

你能帮帮我吗?创造网络的最佳方式是什么?或者最好的选择是简单,我的意思是手动:(?

1 个答案:

答案 0 :(得分:2)

这可能会让你开始:

UPDATED x2 jsFiddle Demo

var aAlpha = ['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o'];
var aNum = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];
var grid='';

for ( var i=0; i<15; i++) {
    grid += '<div class="hrow">';
    for (var j=0; j<15; j++) {
        grid += '<div class="grid" id="' +aAlpha[i]+aNum[j]+ '"></div>';
    }
    grid += '</div><br>';
}

$('#droppable').html(grid);