使用 jquery 即时创建网格

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] 行有问题。我需要的是在循环内首先创建行，然后 select 创建行，然后再次循环并创建每一列。我怎样才能做到这一点？

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

Answer 1

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

如果您想 select 一个特定的索引并将其保存为一个 jQuery 对象，请使用 .eq() :

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

Answer 2

您不必强制 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 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

use isotope http://isotope.metafizzy.co/ 它使用了 Javascript 的帮助，但它很受欢迎，所以你会找到很多文档

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

使用 jquery 即时创建网格

Creating Grid on the fly with jquery

javascript

jquery

grid

frontend