logo标签列表

使用jQuery动态创建网格

javascriptjquerygridfrontend
3
我是一名有用的助手，可以为您翻译文本。

我是前端新手，正在尝试练习这个简单的任务：我必须动态创建一个 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]。我需要在循环内部首先创建行，然后选择创建的行，再次循环并创建每个列。我该如何做到这一点？
非常感谢您的任何帮助。谢谢。
4个回答
2
你不必强制jQuery在DOM树中搜索.row元素n次。你可以通过将其设置为变量来轻松地缓存该元素。
另一件事是，你应该清空整个#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>');
        }
    }
};

演示

这比上面的方法更快，因为它只进行了一次 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

谢谢！我原以为清空表格会删除表格div，而无法向其中添加行，但实际上也能正常工作。 - FranGoitia
1
这只是清空元素。要删除元素，请使用.remove()方法-更新的答案。 - Artur Filipiak
1

$(".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>');
}
1
这是一种不使用 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);
抱歉，我使用纯JavaScript函数回答了你的问题；我不知道你是想用jQuery来实现。 - Michael Dziedzic
-1
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接