display first item jquery
<p>I have a list that is kind of like this:</p>

<pre><code>&lt;li class="listElement semiUniqueCLassOne" unique-class="semiUniqueCLassOne" style="display:none;"&gt;one&lt;/li&gt;
&lt;li class="listElement semiUniqueCLassOne" unique-class="semiUniqueCLassOne" style="display:none;"&gt;two&lt;/li&gt;
&lt;li class="listElement semiUniqueCLassOne" unique-class="semiUniqueCLassOne" style="display:none;"&gt;three&lt;/li&gt;
&lt;li class="listElement semiUniqueCLassTwo" unique-class="semiUniqueCLassTwo" style="display:none;"&gt;four&lt;/li&gt;
&lt;li class="listElement semiUniqueCLassTwo" unique-class="semiUniqueCLassTwo" style="display:none;"&gt;five&lt;/li&gt;
&lt;li class="listElement semiUniqueCLassThree" unique-class="semiUniqueCLassThree" style="display:none;"&gt;six&lt;/li&gt;
</code></pre>

<p>I'm trying to only show the first of each of the <code>semiUniqueCLass</code> so I'm attempting to do it like this:</p>

<pre><code>$('.listElement').each(function(){
    var uniqueClass = $(this).attr('unique-class');
    if($('.'+uniqueClass).is(':first')){
        $(this).show();
    }
});
</code></pre>

<p>this doesn't work... what ways can I make it work? tried several, a bit stuck. </p>
