如何在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>