如何找到唯一的数据属性数

Question

我有以下标记：

<ul class="category-item-container">
    <li class="category-item" data-group="bottoms">Jeans</li>
    <li class="category-item" data-group="tops">Shirt</li>
    <li class="category-item" data-group="tops">Hoodie</li>
    <li class="category-item" data-group="bottoms">shorts</li>
    <li class="category-item" data-group="accesories">Hat</li>
    <li class="category-item" data-group="accesories">Hanger</li>
    <li class="category-item" data-group="bottoms">Boxer</li>
    <li class="category-item" data-group="accesories">Tørklæde</li>
    <li class="category-item" data-group="accesories">Solbriller</li>
    <li class="category-item" data-group="bottoms">Bukser</li>
    <li class="category-item" data-group="tops">T-shirt</li>
</ul>

我想找到data-group数据属性的唯一数目。 在这种情况下，数字将为3。我当时正在考虑将列表转换为数组，然后在data-group循环，但是我不确定该怎么做以及它是否是正确的方法。

Answer 1

循环遍历元素，并将data-group的值添加到集合中。 最后，检查集合的大小。

 var set = new Set(); document.querySelectorAll('.category-item-container > .category-item').forEach(item => { set.add(item.getAttribute('data-group')); }); console.log(set.size); 

 <ul class="category-item-container"> <li class="category-item" data-group="bottoms">Jeans</li> <li class="category-item" data-group="tops">Shirt</li> <li class="category-item" data-group="tops">Hoodie</li> <li class="category-item" data-group="bottoms">shorts</li> <li class="category-item" data-group="accesories">Hat</li> <li class="category-item" data-group="accesories">Hanger</li> <li class="category-item" data-group="bottoms">Boxer</li> <li class="category-item" data-group="accesories">Tørklæde</li> <li class="category-item" data-group="accesories">Solbriller</li> <li class="category-item" data-group="bottoms">Bukser</li> <li class="category-item" data-group="tops">T-shirt</li> </ul> 

Answer 2

在一行代码中使用Set ， Array.from和document.querySelectorAll

 const result = new Set(Array.from(document.querySelectorAll('li[data-group]'), ({dataset:{group}}) => group)).size; console.log(`there are ${result} unique groups`); 

 <ul class="category-item-container"> <li class="category-item" data-group="bottoms">Jeans</li> <li class="category-item" data-group="tops">Shirt</li> <li class="category-item" data-group="tops">Hoodie</li> <li class="category-item" data-group="bottoms">shorts</li> <li class="category-item" data-group="accesories">Hat</li> <li class="category-item" data-group="accesories">Hanger</li> <li class="category-item" data-group="bottoms">Boxer</li> <li class="category-item" data-group="accesories">Tørklæde</li> <li class="category-item" data-group="accesories">Solbriller</li> <li class="category-item" data-group="bottoms">Bukser</li> <li class="category-item" data-group="tops">T-shirt</li> </ul> 

Answer 3

您可以循环每个li并创建一个唯一元素数组， 例如 ：

 var groups = []; document.querySelectorAll("ul.category-item-container li").forEach(v => { var group = v.getAttribute("data-group"); if (!groups.includes(group)) { groups.push(group); } }); console.log(groups.length); 

 <ul class="category-item-container"> <li class="category-item" data-group="bottoms">Jeans</li> <li class="category-item" data-group="tops">Shirt</li> <li class="category-item" data-group="tops">Hoodie</li> <li class="category-item" data-group="bottoms">shorts</li> <li class="category-item" data-group="accesories">Hat</li> <li class="category-item" data-group="accesories">Hanger</li> <li class="category-item" data-group="bottoms">Boxer</li> <li class="category-item" data-group="accesories">Tørklæde</li> <li class="category-item" data-group="accesories">Solbriller</li> <li class="category-item" data-group="bottoms">Bukser</li> <li class="category-item" data-group="tops">T-shirt</li> </ul>