title: Using jQuery to select first elements with distinct data-attribute
body: <p>I've got a <code>ul</code> of various items which can have one of several possible <code>data-attribute</code> values, like this:</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li id="li1" data-cat="one"&gt;test item
      &lt;li id="li2" data-cat="one"&gt;test no 2
      &lt;li id="li3" data-cat="two"&gt;test dummy
      &lt;li id="li4" data-cat="three"&gt;test no 4
      &lt;li id="li5" data-cat="three"&gt;more test
      &lt;li id="li6" data-cat="three"&gt;test no 6
  &lt;/ul&gt;
  </code></pre>
  
  <p><em>I'm attempting to use jQuery to select the first item of each distinct</em> <code>data-cat</code> <em>value</em> - so for this example, <code>li#li1</code>, <code>li#li3</code>, and <code>li#li4</code>. I've tried building an array of each element with the <code>data-attribute</code>, then sorting with <code>.unique</code> like this</p>
  
  <pre><code>var list = $( '[data-cat]' ).get();
  listSorted = jQuery.unique( list );
  $( listSorted ).addClass('active');
  </code></pre>
  
  <p>But the code just selected all elements (<a href="http://jsfiddle.net/nB3ru/4/" rel="nofollow noreferrer">see fiddle here</a>) </p>
  
  <p>I've found answers on SO like <a href="https://stackoverflow.com/questions/16397352/jquery-find-first-element-by-attribute">this one</a> that come close, but they all seem to rely on knowing the <code>data-attribute</code> value beforehand and searching for that specific value. Is it possible to select the first element with a particular <code>data-cat</code> value without specifying the values beforehand?</p>