[英]Inserting html div elements into 2-dimensional array
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]
等位置。
問題是您將數組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]);
}
}
演示: 小提琴
這里有幾個問題。
if (mainCube != null)
檢查沒有意義,那里永遠不會有null
。 您可能有一個空數組,但不能為null
。
在您的第一個循環中, mainCube[k] = new Array(15)
行用空白數組替換了您在該位置具有的元素。 因此,首先查找元素是沒有意義的。
mainCube[i][j].className = '.letterPix';
實際上,類名不應該以.
開頭.
(我不知道它在技術上是否被允許,但這是一個非常糟糕的主意。)
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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.