如何在javascript中查询数据属性值（不使用jquery）？

Question

如果我有一个由ul（行）和li（单元格）组成的网格，我希望根据ul和li的数据属性值获取特定的单元格：

document.querySelectorAll(div.grid ul[data-${this.y}] li[data-${this.x}]'_

当我在 MDN 上搜索时，我只找到了如何基于 data 属性 检索 html 元素，但没有找到它的值。

非常感谢任何指引 - 请不要使用 jQuery。

- Sam Cross

---

你需要这个吗？document.querySelector('ul[data-y="SOME_ROW_ID"] li[data-x="SOME_COL_ID"]') - Tolgahan Albayrak

-${this.y}是什么意思？它会被计算成什么吗？ - Searching

document.querySelectorAll('div.grid ul[data="'+this.x+'"] li[data="'+this.y+'"]')。我仍然不确定这是如何使用纯JS的 -${this.y}。 - Searching

是的，这非常有帮助。我想我只是在语法上被绊倒了。${this.y}不是jQuery，而是Javascript插值。再次感谢！ - Sam Cross

好吧，你学到了一些东西。我从来不知道JS可以做到那样的事情。谢谢。我应该去看看这个。 - Searching

Answer 1

你可以使用字符串插值并使其正常工作。

以下是你可以做的。

document.addEventListener('DOMContentLoaded', function() {

  let ulData = 2,
    liData = 4;

  document.querySelector(`div.grid ul[data="${ulData}"] li[data="${liData}"]`).classList.add("red");
});

.red {
  color: red;
}

<div class="grid">
  <ul data="2">
    <li data="1">
      One
    </li>
    <li data="2">
      Two
    </li>
    <li data="3">
      Three
    </li>
    <li data="4">
      Four
    </li>
    <li data="5">
      Five
    </li>
  </ul>
</div>

- Sreekanth