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

Question

I have the following markup:

<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>

I would like to find the unique number of data-group data-attributes. In this case the number would be 3. I was thinking to turn the list into an array and then loop over the data-group , but I am not sure how that could be done, and if it is the correct way to do it.

Answer 1

Loop over the elements and add the values of data-group to a set. At the end, check the size of the set.

 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

Use Set , Array.from and document.querySelectorAll in one line of code

 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

You could cycle every li and create an array of unique elements, eg :

 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>