如何在javascript中查询数据属性值（没有jquery）？

Question

如果我有一个由ul's （行）和li's （单元格）组成的网格，我想根据ul和li的数据属性值得到一个特定的单元格：

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

当我在MDN上搜索时，我只发现了如何根据data attribute检索html element ，但不是它的值。

任何指针都将非常感激 - 请不要jQuery 。

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>