Javascript 使用jquery动态创建网格

我是前端新手，我正在尝试做这个简单的任务：我必须动态创建一个由用户输入的网格

我成功地创建了一个固定大小的网格，但我的问题是在尝试动态创建时

这是我为3*3网格编写的代码：

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

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]行存在问题。我需要的是在循环中首先创建行，然后选择创建的行，然后再次循环并创建每个列。我该怎么做

任何帮助都将不胜感激。谢谢。

$。行[i]获取HTML元素。这么晚了，$row.append；将不起作用，因为.append是一个jQuery方法

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

---

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

另一件事是，您应该清空整个网格元素，而不是.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>');
        }
    }
};

这将比上面的一个更快，因为它是单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);
};

---

这里有一种不用jQuery的方法

-

使用同位素它使用Javascript的帮助，但是它非常流行，所以你会发现很多文档

---

如果您发现它非常复杂，那么有许多高级插件已经基于同位素进行了开发，例如媒体盒

谢谢！我以为清空网格会删除grid div，我不能向它追加行，但它也能工作。这只会清空元素。用于删除元素的是.remove方法-更新的answerSorry，用于纯JavaScript函数；不知怎的，我没注意到你在问如何在jQuery中实现它。

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);
};

<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);