title: Filter html elements based on data attribute
body: <p>I have the following html structure</p>
  <pre><code>&lt;div id=&quot;container&quot;&gt;
      &lt;div id=&quot;child_1&quot; data-customId=&quot;100&quot;&gt;
      &lt;/div&gt;
      &lt;div id=&quot;child_2&quot; data-customId=&quot;100&quot;&gt;
      &lt;/div&gt;
      &lt;div id=&quot;child_3&quot; data-customId=&quot;100&quot;&gt;
      &lt;/div&gt;
      &lt;div id=&quot;child_4&quot; data-customId=&quot;20&quot;&gt;
      &lt;/div&gt;
      &lt;div id=&quot;child_5&quot; data-customId=&quot;323&quot;&gt;
      &lt;/div&gt;
      &lt;div id=&quot;child_6&quot; data-customId=&quot;14&quot;&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>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:</p>
  <pre><code>$(`div[id*=&quot;child_&quot;]`).length); // =&gt; 6
  </code></pre>
  <p>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.</p>
  <p>I was trying to do something like this:</p>
  <pre><code>var divs = $(`div[id*=&quot;child_&quot;]`);
  var count = divs.map(div =&gt; div.data-customId).length;
  </code></pre>