将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可能因页面而异。 我已经使用1d数组完成了此操作，但是由于似乎无法使用2d数组，所以我碰到了墙，并且将错误区域缩小到了“ check3”和“ check4”之间的位置，但是我可以似乎找不到解决方案。 有谁认为他们可能知道如何将创建的每个新元素插入2d数组的插槽中。

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

Answer 1

问题是您将数组mainCube更改为数组数组，因此mainCube[i].appendChild(mainCube[i][j])将失败，因为mainCube[i]是一个数组而不是元素

var els = Array.prototype.slice.call(document.querySelectorAll('.mainCubeClass')); //assume there are **three**
if (els !== null) {
    //use a separate array to store the cube
    var mainCube = new Array()
    for (k = 0; k < els.length; k++) {
        mainCube.push(new Array(15))
    } //fill each slot in the array with an array of 15 slots
    for (var i = 0; i < els.length; i++) {
        for (var j = 0; j < mainCube[i].length; j++) { //this is now 15
            mainCube[i][j] = document.createElement('div');
            mainCube[i][j].className = '.letterPix';
            mainCube[i][j].innerHTML = i + ':' + j
            els[i].appendChild(mainCube[i][j]);
        }
    }
}

演示： 小提琴

---

var els = Array.prototype.slice.call(document.querySelectorAll('.mainCubeClass')),
    i, j, el, mainCube = [],
    row;
for (var i = 0; i < els.length; i++) {
    row = [];
    mainCube.push(row);
    for (var j = 0; j < 15; j++) { //this is now 15
        el = document.createElement('div');
        el.className = 'letterPix';
        el.innerHTML = i + ':' + j
        row.push(el)
        els[i].appendChild(mainCube[i][j]);
    }
}

演示： 小提琴

Answer 2

这里有几个问题。

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

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

3. mainCube[i][j].className = '.letterPix'; 实际上，类名不应该以.开头. （我不知道它在技术上是否被允许，但这是一个非常糟糕的主意。）

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

我不知道您要如何处理最初查找的元素，但是如果要创建3x15的div元素数组，则：

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>