Javascript 将html div元素插入到二维数组中
我需要在二维数组中输入div元素。我想动态创建这些div,因为.mainCubeClass可能因页面而异。我已经用1d数组完成了这项工作,但现在我遇到了一个难题,因为我似乎无法通过2d数组,我已经将错误区域缩小到检查3和检查4之间的点,但我似乎找不到解决方案。有人认为他们可能知道如何将创建的每个新元素插入我的2d数组的插槽中吗Javascript 将html div元素插入到二维数组中,javascript,html,arrays,Javascript,Html,Arrays,我需要在二维数组中输入div元素。我想动态创建这些div,因为.mainCubeClass可能因页面而异。我已经用1d数组完成了这项工作,但现在我遇到了一个难题,因为我似乎无法通过2d数组,我已经将错误区域缩小到检查3和检查4之间的点,但我似乎找不到解决方案。有人认为他们可能知道如何将创建的每个新元素插入我的2d数组的插槽中吗 例如,如果有3.mainCubeClasse,那么在mainCube[0][0]…mainCube[0][1]等位置创建和插入的元素总数应为45个。问题是您正在将数组ma
例如,如果有3.mainCubeClasse,那么在mainCube[0][0]…mainCube[0][1]等位置创建和插入的元素总数应为45个。问题是您正在将数组mainCube更改为数组数组,因此mainCube[i].appendChildmainCube[i][j]将失败,因为mainCube[i]数组不是元素吗
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
}
}
演示:
演示:这里有几个问题 if mainCube中没有任何意义!=空值检查,在那里永远不会有空值。您可以有一个空数组,但不能为null 在第一个循环中,mainCube[k]=newarray15行将该位置的元素替换为空白数组。因此,首先查找元素是毫无意义的 mainCube[i][j].className='.lettpix';类名真的,真的不应该以字母开头。我不知道技术上是否允许,但这是一个非常糟糕的主意 Re mainCube[i]。appendChildmainCube[i][j];:数组没有appendChild方法,但mainCube[i]是一个数组 我不知道您想对最初查找的元素做什么,但是如果您想创建一个3x15 div元素数组,那么:
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]);
}
}
mainCube[i]。我想是缺少[j]。您应该查看控制台以找到errorsHow您是否正在运行此代码?请注意,如果不是在初始页面加载期间,则第一个document.write将清除页面上的所有内容。查看如何使用浏览器中内置的功能齐全的调试器进行调试,而不是document.write语句。^^^同意上述意见^^我建议使用console.log;好的,我们将了解如何使用console.log,然后感谢您的建议。但是,它正在页面加载期间运行。@NewToJS:No,不是console.log;调试器。console.log风格的调试在JavaScript创建之前就已经过时了,除了少数几个用例外,我们都称之为printf风格的调试。className='.lettpix'坏的类名。判断类名是好是坏的标准是什么?在我发布这个问题后,我开始怀疑这是我的问题,我甚至在评论中写道。谢谢@Arun P Johny,你澄清了我基本上是如何用空数组覆盖mainCube的,我也不知道。appendChild在数组中不好。有道理。哦,没关系,我明白为什么它是一个坏的类名,因为点。该死的,对不起,我应该把它删掉的==空检查,它对我的代码的其余部分很有用,但我应该解释一下。或者它是有用的,我不确定了。感谢您澄清了was将元素与数组元素混淆的错误。
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]);
}
}
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
}
}
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);
}
}