Estoy dibujando una matriz bidimensional con JavaScript y CSS estándar, pero me cuesta indexar las coordenadas de cada elemento.
Hay un par de problemas. Si pongo coordenadas en clase, por ejemplo,
class="_1 _2" Y luego use getElementsByClassName o querySelector, obtendré ambos elementos con class="_1 _2" y class="_2 _1"
Mi solución actual es usar tanto la clase como la identificación. Luego hago referencia con document.getElementsByClassName("_1")[1]
Me pregunto si tienes alguna idea/sugerencia al respecto.
Gracias
Supongo que podrías usar atributos de datos así:
const elements = document.querySelectorAll('[data-x="2"][data-y="1"]'); for (let el of elements) { el.classList.add('selected'); } table td { width: 50px; height: 50px; margin: 2px; background-color: green; color: white; } .selected { background-color: red; } <table> <tr> <td data-x="1" data-y="1">11</td> <td data-x="1" data-y="2">12</td> </tr> <tr> <td data-x="2" data-y="1">21</td> <td data-x="2" data-y="2">22</td> </tr> </table>¿De verdad quieres darles todas las clases con nombre?
A veces es más fácil usar la posición de los elementos (por ejemplo, nth-child(1)) en este tipo de situación, ya que se puede acceder a ellos mediante cálculos de enteros en lugar de tener que crear una cadena (o dos) para que coincidan con las clases.
He aquí un ejemplo trivial:
function getEl(mx, row, column) { return mx.querySelector(':nth-child(' + (row - 1) * 2 + column + ')'); } const matrix = document.querySelector('#matrix'); alert(getEl(matrix, 1, 2).innerHTML); #matrix div:nth-child(odd) { background: green; } <div id="matrix"> <div>A</div> <div>B</div> <div>C</div> <div>D</div> </div>