Question

我是网络开发的新手，但拥有相当扎实的编程背景。我已经尝试了多种方法来根据用户输入以编程方式创建元素。我试图通过JQuery创建一个网格。

我通过将用户输入存储到变量中并通过for循环来创建网格来解决这个问题。这是.js文件的代码：

var rows = 8;
var columns = 8;
var $row = $("<div />", {class: 'row'});
var $square = $("<div />", {class: 'square'});

$(document).ready(function(){
    for(var i = 0; i < rows; i++){      
            $("#wrapper").append($row);
    }

    for(var i = 0; i < columns; i++){
            $(".row").append($square);
    }
});

现在出于某种原因，此代码仅在#wrapper中创建一行，在行中创建一个正方形。我曾尝试复制解决此问题的示例CSS文件，但似乎没有任何效果。这就是我现在拥有的CSS：

#wrapper {
    width: 850px;
    height: 850px;

    margin-top: 100px;
    margin-left: auto;
    margin-right: auto;

    background: #000000;
}

.row {
    width: auto;
    height: 100px;

    background: #313131;
}

.square {
    width: 100px;
    height: 100px;

    margin: 0px;

    outline: 1px solid;
    display: inline-block;
    float: left;
    background: #FFFFFF;
}

这是我的HTML：

<!doctype html>
<html>

<head>
    <title>Draw Grid</title>
    <link rel="stylesheet" type="text/css" href="theme.css" >
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>        
    <script src="draw.js"></script>
</head>

<body>

    <div id="wrapper">

    </div>
</body>

</html>

有人可以帮帮我吗？我很困惑。我尝试了一切。这是CSS格式错误吗？

Answer 1

问题是你只创建了一个行和方形对象，你需要使用克隆副本，否则它们只是复制

var rows = 8;
var columns = 8;
var $row = $("<div />", {
    class: 'row'
});
var $square = $("<div />", {
    class: 'square'
});

$(document).ready(function () {
    //add columns to the the temp row object
    for (var i = 0; i < columns; i++) {
        $row.append($square.clone());
    }
    //clone the temp row object with the columns to the wrapper
    for (var i = 0; i < rows; i++) {
        $("#wrapper").append($row.clone());
    }
});

演示：Fiddle

使用JQuery for loop </div>创建<div>网格

1 个答案: