我试图使用for循环和向动态创建的div添加一个唯一的类。使用jquery添加类。循环正在成功地将唯一类添加到所有创建的div中,但最终迭代除外(在这种情况下为0.square143)。
for循环还向所有这些动态创建的元素(.art)添加了一个统一的类,并且正在成功地这样做。
我遇到的另一个问题可能与此有关,那就是该程序正在创建两倍于预期的div。
基本上,我正在尝试向for循环创建的最终迭代div添加一个唯一的类。
function addElementEllsworth () {
//For loop will dynamically create specified number of empty divs
for (var i = 0; i < 144; i++) {
//Actually creating divs here
var newDiv = document.createElement("div");
var currentDiv = document.getElementById("div1");
//Giving all the created divs for ability to change CSS of entire grid
$(function() {
$("div").addClass("art");
});
//Giving each individual div a unique class. Then assigning a random color (RGB value) to that class using function.
$("div").each(function(i) {
$(this).addClass("square" + i);
$(this).css('backgroundColor', randomEllsworthColor());
});
//Putting them into the body of the file
document.body.insertBefore(newDiv, currentDiv);
}
} addElementEllsworth ();
//This function will return a random color (RGB value). The function forms the return value by assembling the proper RGB syntax and random numbers created in a different function.
function randomColor () {
var maxRGBValue = 255;
var r = generateRandom(maxRGBValue);
var g = generateRandom(maxRGBValue);
var b = generateRandom(maxRGBValue);
var theColor = "rgb(" + r + "," + g + "," + b + ")";
return theColor;
}
//Returns a hex value associated with Kelly's Spectrum painting at the SFMOMA
function randomEllsworthColor () {
//Color hexes taken from the Ellsworth Kelly painting at the SFMOMA
ellsworthColors = ["#2f2d2d","#c6becd","#ff8635","#3b354c","#94d35a","#f7f25e","#0170c1","#243881","#703550","#b38cb9","#7bc653","#do2624","#f2a00f","#f3e44e"];
//Function returns a value from the above array. Index is randomly selected by generating a random index from the array.
return ellsworthColors[generateRandom(ellsworthColors.length)];
}
function generateRandom (num) {
return Math.floor(Math.random() * Math.floor(num));
}
.art {
float:left;
width: 08.33333333%;
padding-bottom: 08.333333%; /* = width for a 1:1 aspect ratio */
margin:0%;
background-color: cyan; /* commenting will hide all colorless square */
}
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<link rel="stylesheet" href="ellsworth.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
