如何在显示为正方形/矩阵的元素的线性数组中通过键找到元素的x，y位置？-前端问题

JavaScript - How to find x,y position of element by key in a linear array of elements that are displayed as a square/matrix?(如何在显示为正方形/矩阵的元素的线性数组中通过键找到元素的x，y位置？)

本文介绍了如何在显示为正方形/矩阵的元素的线性数组中通过键找到元素的x，y位置？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有以下值数组：

var array = ['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p'];

直观地表示为矩阵：

a  b  c  d
e  f  g  h
i  j  k  l
m  n  o  p

我要做的是-如果我获得此数组的任何键和数组的长度，则计算行&；列值[x,y]。

0(a)的16(数组长度)将为[0,0]
6(g)的16(数组长度)将为[1,2]
13(n)的16(数组长度)将为[3, 1]
等

我在for(i = 0; i < array.length; i++)循环中迭代数组值，以将它们显示为容器中的块。我可以内联计算每个值在循环中[x,y]位置，也可以使用函数来计算-这并不重要。

我卡住了..

var array = ['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p'];
var size  = 100 / Math.sqrt(array.length);

for(var i = 0; i < array.length; i++) {
    
  tile = document.createElement('div');
  
  tile.innerHTML        = array[i] + ' [x,y]';
  tile.style.width      = size+'%';
  tile.style.height     = size+'%';
  tile.style.float      = 'left';
  tile.style.background = 'rgb('+(50+i*5)+','+(150+i*5)+',200)';
  
  document.getElementById('square').appendChild(tile);
  
}

<div id="square" style="width:200px;height:200px;border:1px solid;"></div>

推荐答案

提前计算宽度(或高度)，然后使用i % width和Math.floor(i / width)计算出当前的x和y位置。(另外，在为文本赋值时，请确保赋值给textContent而不是innerHTML，并且尽量不隐式创建全局变量)

var array = ['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p'];
const width = Math.sqrt(array.length);
var size  = 100 / width;


for(var i = 0; i < array.length; i++) {
    
  const tile = document.createElement('div');
  const x = i % width;
  const y = Math.floor(i / width);
  
  tile.textContent        = `${array[i]} [${x},${y}]`;
  tile.style.width      = size+'%';
  tile.style.height     = size+'%';
  tile.style.float      = 'left';
  tile.style.background = 'rgb('+(50+i*5)+','+(150+i*5)+',200)';
  
  document.getElementById('square').appendChild(tile);
  
}

<div id="square" style="width:200px;height:200px;border:1px solid;"></div>

这篇关于如何在显示为正方形/矩阵的元素的线性数组中通过键找到元素的x，y位置？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！