Как индексировать координаты элементов в матрице

#javascript #css #css-selectors

Вопрос:

Я рисую двумерную матрицу с помощью JavaScript и CSS, но мне трудно индексировать координаты каждого элемента.

Есть пара проблем. Если я введу координаты в класс, например,

 class="_1 _2"
 

А затем используйте либо getElementsByClassName, либо querySelector, я получу оба элемента с class="_1 _2" и class="_2 _1"

Мое текущее решение состоит в том, чтобы использовать как класс, так и идентификатор. Затем я ссылаюсь на document.getElementsByClassName("_1")[1]

Интересно, есть ли у вас какие-либо мысли/предложения по этому поводу?

Спасибо

Комментарии:

1. почему нет class="x1 y2"

2. Являются ли размеры матрицы динамическими или статическими ?

3. AFAIK, использующий подчеркивание в начале имени класса, «обычно» используется для конкретного поставщика или аналогичного использования.

4. Рассматривали ли вы атрибуты данных ? например data-x="1" data-y="2"

5. Возможно, к тому времени, когда вы будете запрашивать числа, они у вас уже будут, поэтому я не вижу, какое извлечение потребуется, кроме того, любой запрос как с x, так и с y будет возвращать только один элемент. Это похоже на проблему xy

Ответ №1:

Думаю, вы могли бы использовать атрибуты данных примерно так:

 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> 

Ответ №2:

Вы действительно хотите дать им всем именованные классы?

Иногда проще использовать положение элементов — например, n-го дочернего элемента(1) — в такой ситуации, поскольку к ним можно получить доступ с помощью целочисленных вычислений, а не создавать строку (или две) для соответствия классам.

Вот тривиальный пример:

 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> 

Комментарии:

1. это очень интересно. У меня есть строка класса и столбец класса. Никогда не думал о том, чтобы все элементы были в одном <div class=»матрица»>