JavaScript（no 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>