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

Question

我正在用香草 JavaScript 和 CSS 绘制一个二维矩阵，但我正在努力为每个元素的坐标建立索引。

有几个问题。如果我把坐标放在 class 中，例如

class="_1 _2"

然后使用 getElementsByClassName 或 querySelector，我将使用 class="_1 _2" 和 class="_2 _1"

获取两个元素

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

不知道你有没有thought/suggestion关于这个的？

谢谢

Answer 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>

Answer 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>

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

How to index coordinates of elements in a matrix

javascript

css

css-selectors