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

Question

我正在尝试使用 for 循环和带有 jquery 的 .addClass 将唯一的 class 添加到动态创建的 div。循环成功地将唯一 class 添加到所有创建的 divs，除了最后一次迭代（在这种情况下为 .square143）。

for 循环还向所有这些动态创建的元素 (.art) 添加了一个统一的 class，并且这样做很成功。

我遇到的另一个问题（可能与此问题有关）是程序创建的 divs 是预期的两倍。

基本上，我试图将唯一的 class 添加到由 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 没有您期望的 class 的原因是 $("div").each(function(i) { 选择了页面上已经存在的 div，而在您的代码中是最新的div 尚未添加到页面，直到 document.body.insertBefore。

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

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

希望对您有所帮助。

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

.addClass misses the final dynamically created element using for loops in javascript?

javascript

jquery

dom-manipulation