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

Question

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

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

class="_1 _2"

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

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

我想知道你对此有什么想法/建议吗?谢谢

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

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

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