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]
等。 最佳答案
这里有几个问题。if (mainCube != null)
检查没有意义,那里永远不会有null
。您可能有一个空数组,但没有null
。
在第一个循环中,mainCube[k] = new Array(15)
行用空白数组替换在该位置具有的元素。因此,首先查找元素是没有意义的。mainCube[i][j].className = '.letterPix';
类名确实不是真的应该以.
开头(我不知道它在技术上是否允许,但这是一个非常糟糕的主意。)
关于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>