Question

I have a list that is kind of like this:

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

I’m trying to only show the first of each of the semiUniqueCLass so I’m attempting to do it like this:

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

this doesn’t work… what ways can I make it work? tried several, a bit stuck.

Answer 1

Just use the .first() method.

$('.listElement').each(function(){
    var uniqueClass = $(this).attr('unique-class');
    $('.'+uniqueClass).first().show();
});

And the working demo.

Another solution is shown as below:

var clazzs = $('.listElement').map(function() {
  return $(this).attr('unique-class');
});

$.unique(clazzs).each(function() {
  $('.'+this).first().show();
});

Also the working demo.