动态添加不创建相等网格的div

时间:2015-08-02 08:54:54

标签: javascript jquery html css

我正在尝试动态添加一堆div来创建一定大小的网格。我的代码如下:

function genGrid(v) {
    var e = document.getElementById('container'); //This is what we want to append the rows to
    for (var i = 0; i < v; i++) {
        var row = document.createElement("div"); // This creates each row.
        row.className="row"; // This declares the class name for the created div.
        for(var j = 0; j < v; j++) {
            var cell = document.createElement("div");
            cell.className="cell";
            $('.cell').css("width", (960/v));
            $('.cell').css("height", (960/v));
            row.appendChild(cell);
        }
        e.appendChild(row);
    }
}

但是出于某种原因,每当我使用参数4调用genDivs函数时,代码会创建一个3x4网格,而不是4x4网格。有什么帮助吗?

1 个答案:

答案 0 :(得分:0)

我不知道您的代码无法正常工作但我已更正您的代码,更改这些代码 -

$('.cell').css("width", (960/v));
$('.cell').css("height", (960/v));

到这些 -

$(cell).css("width", (960/v));
$(cell).css("height", (960/v));

这是工作小提琴 - http://jsfiddle.net/55v2skmb/