Filter html elements based on data attribute

August 10, 2022

I have the following html structure

<div id="container">
    <div id="child_1" data-customId="100">
    </div>
    <div id="child_2" data-customId="100">
    </div>
    <div id="child_3" data-customId="100">
    </div>
    <div id="child_4" data-customId="20">
    </div>
    <div id="child_5" data-customId="323">
    </div>
    <div id="child_6" data-customId="14">
    </div>
</div>

And what I want to do is to get the count of child divs that contains different data attribute. For example, I’m trying this:

$(`div[id*="child_"]`).length); // => 6

But that code is returning 6 and what I want to retrieve is 4, based on the different data-customId. So my question is, how can I add a filter/map to that selector that I already have but taking into consideration that is a data-attribute.

I was trying to do something like this:

var divs = $(`div[id*="child_"]`);
var count = divs.map(div => div.data-customId).length;

>Solution :

After you getting the child-divs map their customid and just get the length of unique values:

let divs = document.querySelectorAll(`div[id*="child_"]`);
let idCustoms = [...divs].map(div=>div.dataset.customid);
//idCustoms: ["100", "100", "100", "20", "323", "14"]
//get unique values with Set 
console.log([... new Set(idCustoms)].length);//4
//or with filter
console.log(idCustoms.filter((item, i, ar) => ar.indexOf(item) === i).length);//4

<div id="container">
    <div id="child_1" data-customId="100">
    </div>
    <div id="child_2" data-customId="100">
    </div>
    <div id="child_3" data-customId="100">
    </div>
    <div id="child_4" data-customId="20">
    </div>
    <div id="child_5" data-customId="323">
    </div>
    <div id="child_6" data-customId="14">
    </div>
</div>

Note: $ is equivalent to document.querySelectorAll in js returns a NodeList that’s why I destructure it by the three dots ...