admin管理员组

文章数量:1323323

I'm new to web development but have a pretty solid programming background. I've tried multiple ways to create a element programatically based on user input. I'm trying to essentially create a grid through JQuery.

I'm tackling this problem by storing the user input into a variable and going through a for loop to create the grid. Here is the code for the .js file:

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

Now for some reason, this code only creates one row in #wrapper and one square in the row. I've tried copying the example CSS files that tackle this problem but nothing seems to work. Here's what I have right now for my 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;
}

And here's my HTML:

<!doctype html>
<html>

<head>
    <title>Draw Grid</title>
    <link rel="stylesheet" type="text/css" href="theme.css" >
    <script src=".11.0/jquery.min.js"></script>        
    <script src="draw.js"></script>
</head>

<body>

    <div id="wrapper">

    </div>
</body>

</html>

Can anybody help me out? I'm so confused. I've tried everything. Is this a CSS formatting error?

I'm new to web development but have a pretty solid programming background. I've tried multiple ways to create a element programatically based on user input. I'm trying to essentially create a grid through JQuery.

I'm tackling this problem by storing the user input into a variable and going through a for loop to create the grid. Here is the code for the .js file:

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

Now for some reason, this code only creates one row in #wrapper and one square in the row. I've tried copying the example CSS files that tackle this problem but nothing seems to work. Here's what I have right now for my 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;
}

And here's my HTML:

<!doctype html>
<html>

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

<body>

    <div id="wrapper">

    </div>
</body>

</html>

Can anybody help me out? I'm so confused. I've tried everything. Is this a CSS formatting error?

  • javascript
  • jquery
  • html
  • css
  • web
Share asked Aug 27, 2014 at 2:57 user3765383user3765383 231 gold badge2 silver badges6 bronze badges 2
  • Put the actual DOM code e.g. $('<div />', {class: 'row'}) in place of $row. $row is probably representing a single instance and thus gets appended to each place, each time rather than creating a new instance each time. – scrowler Commented Aug 27, 2014 at 3:02
  • Also, creating a JSFiddle of your problem will often help to get you answers. – scrowler Commented Aug 27, 2014 at 3:04
Add a ment  | 

1 Answer 1

Reset to default 5

The problem is you are creating only one row and square objects, you need to use cloned copies else they are just copy

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

Demo: Fiddle

本文标签： javascriptCreating ltdivgt grid with JQuery for loopStack Overflow

版权声明：本文标题：javascript - Creating &lt;div&gt; grid with JQuery for loop - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1742141100a2422582.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。