有人能给我解释一下这个用JS/jQuery创建网格的功能吗

Can someone explain me this function for creating grid with JS/jQuery?

本文关键字：JS jQuery 创建 功能 网格 一下 解释      更新时间：2023-09-26

我正在学习jquery/js，我想创建由div组成的网格。这是一个脚本，但我不能完全理解它。

function displayGrid (n) {
    var size = 960;
    var boxSize = (960 - 4*n)/n;
    var wrap = $(".wrap").html("");
    for (var j = 0; j < n; j++) {
        for (var i = 0; i < n; i++) {
            wrap.append( $("<div></div>").addClass("square").height(boxSize).width(boxSize) );
        }
        wrap.append($("<div></div>").css("clear", "both"));
    }
}

在html中，我有一个空的换行类。

此外，我理解以下功能：）

function setGrid() {
    var col = prompt("Enter number of columns: ");
    displayGrid(col);
    clean();
}

感谢

这里有一个基本的逐行解释。。

    function displayGrid (n) {
        var size = 960;    //MAX SIZE TO BE COVERED BY ALL DIVS ,EVEN IF THERE ARE N NO OF DIV'S
        var boxSize = (960 - 4*n)/n;  //FORMULA TO DECIDE WIDTH OF EACH DIV,CAN BE DIFFERENT TOO.
        var wrap = $(".wrap").html(""); //THIS IS A DIV PROBABLY WHERE YOU ARE ADDING THE NEW SMALLER DIVS
        for (var j = 0; j < n; j++) {
            for (var i = 0; i < n; i++) {
                  //TWO FOR LOOPS ,1 IS FOR LOOP THROUGH ROWS , OTHER FOR COLUMNS.
                wrap.append( $("<div></div>").addClass("square").height(boxSize).width(boxSize) );
//THIS APPENDS A BLANK DIV TO DIV WITH CLASS .WRAP, AND ADDS A CLASS SQAURE, AND ALSO WITH WIDTH AND HEIGHT PROPERTY SETS EACH DIVS PROPERTY OF WIDTH AND HEIGHT.
            }
            wrap.append($("<div></div>").css("clear", "both"));
          //THIS SHOULD BE TO MOVE TO NEXT COLUMN.
        } }

下面是注释代码：

//n-> seems to be the number of times to divide the grid
//1-> will get 1 square
//2-> will get 4 square
//3-> will get 9 square and so on... n^2
function displayGrid (n) {
    var size = 960;
    //This seems to calculate size of the squares to fit inside the give area
    // of 960: 960/4
    //-4*n I guess is the border size to remove from each square in order to have an exact match
    var boxSize = (960 - 4*n)/n;
    //this get the grit container, empties it
    var wrap = $(".wrap").html("");
    //now print each square on the document 
    for (var j = 0; j < n; j++) { //columns
        for (var i = 0; i < n; i++) { //rows
            wrap.append( $("<div></div>").addClass("square").height(boxSize).width(boxSize) );
        }
        //this is done to go in the next row, since we are using divs...
        wrap.append($("<div></div>").css("clear", "both"));
    }
}
相关文章：