Question

我是前端的新手，我正在尝试执行这项简单的任务：我必须动态创建一个n * n的网格（n由用户输入）。

我成功创建了一个修复大小的网格，但我的问题是在尝试动态执行此操作时。

这是我为3 * 3网格编写的代码：http://jsfiddle.net/y7c2h8yk/

为了尝试动态创建它，我编写了以下函数：

var setGridDimensions = function(n) {
    // emptying current grid
    $(".row").empty();
    var $grid = $("#grid");
    for (var i = 0; i < n; i++) {
        // adding row
        $grid.append('<div class="row">');
        // adding each to element to row
        **var $row = $(".row")[i];**
        for (var j = 0; j < n; j++) {
            $row.append('<div class="col"></div>');
        }
    }
};

现在，我了解行var $row = $(".row")[i]存在问题。我需要的是在循环内首先创建行，然后选择创建的行，然后再次循环并创建每一列。我怎样才能做到这一点？

任何帮助都会非常感激。感谢。

Answer 1

您不必强制jQuery在DOM树.row次中搜索n元素。通过将元素设置为变量，您可以轻松地缓存元素。

另一件事是，您应该empty()整个#grid元素而不是.row。 empty() 方法删除元素的内容，但不删除元素本身。

或者，您可以使用$(".row").remove();

删除行

代码（我会使用下一个代码）

var setGridDimensions = function(n) {
    var $grid = $("#grid").empty();
    for (var i = 0; i < n; i++) {
        // create .row and cache it setting as '$row' variable:
        var $row = $('<div class="row"/>').appendTo($grid);
        for (var j = 0; j < n; j++) {
            $row.append('<div class="col"></div>');
        }
    }
};

DEMO

这将比上面的更快，因为它的单个DOM修改：

var setGridDimensions = function(n) {
    var html ='';
    for (var i = 0; i < n; i++) {
        html += '<div class="row">';
        for (var j = 0; j < n; j++) {
            html += '<div class="col"></div>';
        }
        html += '</div>';
    }
    // modify the DOM only once:
    $("#grid").html(html);
};

DEMO

Answer 2

$(".row")[i]获取HTML元素。这么晚，$row.append('<div class="col"></div>');将不起作用，因为.append()是一个jQuery方法。

如果要选择特定索引并将其保留为jQuery对象，请使用.eq()：

var $row = $(".row").eq(i);
for (var j = 0; j < n; j++) {
    $row.append('<div class="col"></div>');
}

Answer 3

这是一种没有jQuery的方法。

https://jsfiddle.net/lemoncurry/evxqybaL/1/

<div id="grid-holder"></div>

-

#grid-holder {
    width: 100%;
}

.row {
    clear: left;
    background-color: red;
}

.cell {
    width: 50px;
    height: 50px;
    border: 1px dashed blue;
    float: left;
}

-

var gridly = function (n) {
    var grid = document.getElementById("grid-holder");
    for (var i = 0; i < n; i++) {
        var row = document.createElement('div');
        row.classList.add("row");
        grid.appendChild(row);
        for (var j = 0; j < n; j++) {
            var cell = document.createElement('div');
            cell.classList.add("cell");
            row.appendChild(cell);
        }
    }             
}

gridly(5);

Answer 4

使用同位素http://isotope.metafizzy.co/它使用Javascript的帮助，但它非常受欢迎，所以你会发现很多文档

如果您发现它非常复杂，那么很多基于同位素开发的高级插件已经存在，例如Media Box http://codecanyon.net/item/media-boxes-responsive-jquery-grid/5683020

使用jquery动态创建网格

4 个答案: