Question

我正在尝试使用for循环和带有jquery的.addClass为动态创建的div添加一个唯一的类。循环成功地将唯一类添加到所有创建的div中，除了最后的迭代（在这种情况下为.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>

Answer 1

最后一个div没有您期望的类的原因是$("div").each(function(i) {选择了页面上已有的div，而在您的代码中，最新的div尚未添加到页面中，直到{ {1}}。

我已经创建了一支笔来展示你的代码在没有JQuery的情况下的外观，即使用普通的Javascript。

https://codepen.io/theleebriggs/pen/XEeMve

希望有所帮助。

.addClass在javascript中使用for循环错过了最终动态创建的元素？

1 个答案: