如何索引矩阵中元素的坐标答案

【问题标题】：How to index coordinates of elements in a matrix如何索引矩阵中元素的坐标
【发布时间】：2021-12-04 00:45:37
【问题描述】：

我正在使用原生 JavaScript 和 CSS 绘制一个二维矩阵，但我正在努力索引每个元素的坐标。

有几个问题。例如，如果我把坐标放在课堂上，

class="_1 _2"

然后使用 getElementsByClassName 或 querySelector，我将得到 class="_1 _2" 和 class="_2 _1" 的两个元素

我目前的解决方案是同时使用 class 和 id。然后我参考document.getElementsByClassName("_1")[1]

不知道您对此有什么想法/建议？

谢谢

【问题讨论】：

为什么不class="x1 y2"
矩阵维度是动态的还是静态的？
AFAIK 在类名开头使用下划线“通常”用于特定于供应商或类似用途。
你考虑过data attributes吗？例如data-x="1" data-y="2"
可以说，当您使用已经拥有的数字进行查询时，所以我看不出需要进行什么提取，而且任何同时包含 x 和 y 的查询都只会返回一个元素.这似乎是xy problem

标签： javascript css css-selectors

【解决方案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】：

你真的想给他们所有命名的类吗？

在这种情况下，有时使用元素的位置（例如 nth-child(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>

【讨论】：

这很有趣。我有一个班级行和一个班级列。从未想过将所有元素放在一个