jQuery append divs

Question

我想将div附加到父div，每个较小的div是从数组中选择的随机背景颜色。我会怎么做？

我已经有了：

$(document).ready(function(){ 

    var cell_size = 10; 
    var container = $("#container"); 
    var colors = ["limepulp", "goldgreen", "chromeoxidegreen", "kermit", "pear"]; 

    /* Get the cell dimentions and populate the grid */ 
    var cell_height_num = container.height()/cell_size; /* This is equal to 50 */ 
    var cell_width_num = container.width()/cell_size;  /* This is also equal to 50 */ 

    for (var i = 0; i < cell_width_num * cell_height_num; i++){ 

     /* What goes here? How can I generate a div with a random background comming from colors[]? */ 
     /* In total, 2500 divs should be generated inside $("#container"); */ 

    } 

}); 

Answer 1

这是更好适合<table>

Live example

代码：

/* Get the cell dimentions and populate the grid */ 
var cell_height_num = 50; /* This is equal to 50 */ 
var cell_width_num = 50; /* This is also equal to 50 */ 
for (var i = 0; i < cell_height_num; i++) { 
    var tr = $("<tr></tr>").appendTo(container); 
    for (var j = 0; j < cell_width_num; j++) { 
     tr.append($("<td></td>", { 
      css: { 
       width: "1px", 
       height: "1px", 
       backgroundColor: colors[Math.floor(Math.random() * colors.length)] 
      } 
     })); 
    } 
} 

Answer 2

var colors = [ 'red', 'blue', 'green', '#ffe' ]; 
... 
for (var i = 0; i < cell_width_num * cell_height_num; i++) { 
    var color = colors[Math.floor(Math.random() * colors.length)]; 
    $('#container').append(
     $('<div/>', { 
      style: 'background-color:' + color, 
      text: 'some text' 
     }) 
    ); 
} 

还要注意ŧ colors数组中包含的帽子颜色不是有效的CSS颜色名称。您可以使用#RGB等价物来定义它们。