javascript - <div> created through jquery not getting styled -
i'm trying create grid of square divs using jquery. problem though columns , content created, last column's divs not styled resulting in 0 height/width div.
js
$(document).ready(function() { (i = 0; < 4; i++) { var column = $("<div class='column'></div>"); (j = 0; j < 4; j++) { var unit = $("<div class='unit'></div>"); $('.unit').css("width", (960 / 4)); $('.unit').css("height", (960 / 4)); column.append(unit); } $("#container").append(column); } }); css
#container { width: 100%; height: auto; text-align: center; } .unit { background-color: grey; margin: 1px; } .column { display: inline-block; } html
<body> <div id="container"></div> </body>
use defined variable unit have created instead $('.unit')
var unit = $("<div class='unit'></div>"); unit.css("width", (960 / 4)); unit.css("height", (960 / 4)); column.append(unit); $(document).ready(function() { (i = 0; < 4; i++) { var column = $("<div class='column'></div>"); (j = 0; j < 4; j++) { var unit = $("<div class='unit'></div>"); unit.css("width", (960 / 4)); unit.css("height", (960 / 4)); column.append(unit); } $("#container").append(column); } }); #container { width: 100%; height: auto; text-align: center; } .unit { background-color: grey; margin: 1px; } .column { display: inline-block; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="container"></div>
Comments
Post a Comment