javascript - 如何使用 javascript 函数为每个 div 分配一个坐标值？

Question

我有一个生成 div 并将它们附加到“容器”div 的函数，它为每个 div 分配一个唯一的 ID。我使用 for 循环来运行该函数并填充“容器”div，它的宽度刚好足以让添加的图 block 创建一个正方形。

下面是我生成div的代码:

function cdiv(ele) {
  var div = document.createElement("div");
  div.className = 'tiles';
  div.id = 'div' + id++; // det unique id and increment id value
  div.addEventListener("click", clr);
  div.dataset.taps = x;
  div.dataset.xcoordinate = 0;
  div.dataset.ycoordinate = 0;
  ele.appendChild(div);
}

我使用以下内容来包含正在创建的 div:

var div = document.getElementById('container');

for (i = 0; i < 100; i++) {
  for (b = 0; b < 100; b++) { 
    cdiv(div);
  }
}

注意 - 我的“容器”div 是 5000px 宽，所以如果创建的每个 div 都是 50px 宽，我将得到一个 div 的正方形网格。

我的问题是能够为每个 div 分配一个坐标。我需要一个函数，我可以使用它传递给正在创建的每个 div 中的 x/y 坐标 tag，并根据 div 在“网格”中的位置给它们一个值。瓷砖的数量是可变的，所以请不要只为 100 x 100 的网格提供解决方案。

Answer 1

不确定我是否完全理解这个问题。

这行得通吗？

function cdiv(ele, xcoord, ycoord) {
  var div = document.createElement("div");
  div.className = 'tiles';
  div.id = 'div' + id++; // det unique id and increment id value
  div.addEventListener("click", clr);
  div.dataset.taps = x;
  div.dataset.xcoordinate = xcoord;
  div.dataset.ycoordinate = ycoord;
  ele.appendChild(div);
}

然后

var div = document.getElementById('container');

for (i = 0; i < 100; i++) {
  for (b = 0; b < 100; b++) { 
    cdiv(div, i, b);
  }
}