javascript - 将html div元素插入二维数组

Question

var mainCube = Array.prototype.slice.call(document.querySelectorAll('.mainCubeClass'));//assume there are **three**
if (mainCube !== null) {
    for (k = 0; k < mainCube.length; k++) {
        mainCube[k] = new Array(15);
    } //fill each slot in the array with an array of 15 slots
    document.write("Check1");//everything good so far
    for (var i = 0; i < mainCube.length; i++) {
        document.write("Check2");//okay, still good
        for (var j = 0; j < mainCube[i].length; j++) { //this is now 15
            document.write("Check3");//everything still as expected
            mainCube[i][j] = document.createElement('div');
            mainCube[i][j].className = '.letterPix';
            mainCube[i].appendChild(mainCube[i][j]);
            document.write("Check4"); //doesn't execute
        }
    }

我需要将 div 元素输入到二维数组中。我想动态创建这些 div，因为 .mainCubeClass 可能因页面而异。我已经用一维数组做到了这一点，但现在我已经碰壁了，我似乎无法通过二维数组，并且我已经将错误区域缩小到“check3”和“check4”之间的位置，但我可以似乎没有找到解决办法。有谁认为他们可能知道如何将创建的每个新元素插入到我的二维数组的槽中。

例如，如果有 3 个 .mainCubeClasse，则总共应创建 45 个元素并插入到 mainCube[0][0] 位置。 .mainCube[0][1] 等等等等

Answer 1

这里有几个问题。

1. if (mainCube != null) 检查没有任何意义，那里永远不会有 null。您可能有一个空数组，但不是 null。

2. 在第一个循环中，mainCube[k] = new Array(15) 行用空白数组替换该位置的元素。因此，首先查找元素是没有意义的。

3. mainCube[i][j].className = '.letterPix'; 类名真的、真的不应该以 . 开头(我不知道不知道技术上是否允许，但这是一个非常糟糕的主意。)

4. 关于mainCube[i].appendChild(mainCube[i][j]);:数组没有appendChild方法，但是mainCube[i] 是一个数组。

我不知道你想对最初查找的元素做什么，但如果你想创建一个 div 元素的 3x15 数组，那么:

var i, j, mainCube, a, div;
mainCube = [];
for (i = 0; i < 3; ++i) {
    mainCube[i] = a = [];
    for (j = 0; j < 15; ++j) {
        // Create the div
        mainCube[i][j] = div = document.createElement('div');

        // Add class and such to div
        div.className = "letterPix"; // No dot!

        // Append it to something
    }
}

如果您的目标是创建这 15 个 div 并将它们附加到您最初查找的元素，那么:

var i, j, mainCube, a, div, elements;
elements = document.querySelectorAll(".mainCubeClass");
mainCube = [];
for (i = 0; i < elements.length; ++i) {
    mainCube[i] = a = [];
    for (j = 0; j < 15; ++j) {
        // Create this div
        mainCube[i][j] = div = document.createElement('div');

        // Add class and such to div
        div.className = "letterPix"; // No dot!

        // Append it to the mainCubeClass element
        elements[i].appendChild(div);
    }
}

实例:

(function() {
  "use strict";
  var i, j, mainCube, a, div, elements;
  elements = document.querySelectorAll(".mainCubeClass");
  mainCube = [];
  for (i = 0; i < elements.length; ++i) {
      mainCube[i] = a = [];
      for (j = 0; j < 15; ++j) {
          // Create this div
          mainCube[i][j] = div = document.createElement('div');

          // Add class and such to div
          div.className = "letterPix";

          // Append it to the mainCubeClass element
          elements[i].appendChild(div);
      }
  }
})();

.mainCubeClass {
  border: 1px solid #02c;
}
.letterPix {
  border: 1px solid #888;
  width: 10px;
  height: 10px;
  display: inline-block;
}

<div class="mainCubeClass"></div>
<div class="mainCubeClass"></div>
<div class="mainCubeClass"></div>