Javascript 二维网格如何查找给定节点编号的索引

我创建了一个二维div网格，其id等于循环计数器迭代。当我单击一个div时，我想使用它的id来确定它在网格上的位置。因此，如果我有一个4x4网格，并且想要id=8的div的索引，那么函数将返回3,1第三行第一列。如何在给定网格大小和块数的情况下编写函数，然后返回其坐标（行和列）

const container=document.getElementById（“容器”）；
常数N=16；
var块=新数组（N）；
函数生成行（行、列）{
container.style.setProperty（'--grid rows'，rows）；
container.style.setProperty（'--grid cols'，cols）；
对于（c=0；c<（行*列）；c++）{
让cell=document.createElement（“div”）；
cell.innerText=（c）；
cell.setAttribute（“id”，c）；
container.appendChild（cell.className=“网格项”；
}
对于（设i=0；i处理此问题的一个好方法是将它们存储在一个长数组中，而不是存储在一个2D数组中，这样您就可以通过ID立即访问它们——假设ID与数组中的索引匹配

然后您需要两个函数：将
ID
转换为
X，Y
，以及将
X，Y
转换为ID

const width = 12

const positionToIndex = (x, y) => (y * width) + x

const indexToPosition = (index) => ({
  x: index % width,
  y: Math.floor(index / width)
})

这假设左上角为（0,0），初始索引为0。然后您只需将其初始化为常规平面数组，并使用
indextoPosition（）
查找x，y位置

// Initialize
for (var i = 0; i < width*height; i++) {
  const position = indexToPosition(i)
  blocks[i] = new Cell(position.x, position.y)
}

// When cell is clicked
cell.onclick = (id) => {
  const {x, y} = indextoposition(id)
}

//初始化
对于（变量i=0；i{
常数{x，y}=indextoposition（id）
}