javascript - display first item jquery - Stack Overflow

admin管理员组

文章数量:1422366

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.

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.

• javascript
• jquery

Share Improve this question Follow asked Jan 31, 2013 at 8:10 SilasSilas 58222 gold badges1010 silver badges1919 bronze badges 2

• When you say "first" do you mean you want the first of each: semiUniqueCLassOne, semiUniqueCLassTwo, semiUniqueCLassThree? – Tom Walters Commented Jan 31, 2013 at 8:15
• Yeah, exactly, the first of semiUniqueCLassOne should show, the first of semiUniqueCLassTwo should show and the first of semiUniqueCLassThree – Silas Commented Jan 31, 2013 at 8:21

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

This should do the trick:

$('.listElement').hide();
$('.listElement:first-child').show();

If there's more elements with the listElement class:

$('.listElement[@class*=semiUniqueCLass]').hide();
$('.listElement[@class*=semiUniqueCLass]:first-child').show();

(Only shows / hides listElements that have a class that contains semiUniqueCLass)

To show the first of each unique semiUniqueCLass* item, take a look at Jack's Answer or xdazz's answer.

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.

To show the first of each unique semiUniqueCLass* item, you'd have to iterate over all relevant .listElement nodes manually:

var shown = {}; // keep track of which class has already been shown

$('.listElement[unique-class]').each(function() {
  var className = this.getAttribute('unique-class');

  if (!shown[className]) {
    // this class has not been seen before, show the first only
    shown[className] = true;
    $(this).show();
  }
});

It shows elements one, four and six.

Update

I've pitted this answer against the two solutions by xdazz using this jsperf benchmark. This answer es out on top with the runner up being ~30% slower (in Chrome).

This code shows the first item :

$('[class^=listElement]').first().show();

本文标签： javascriptdisplay first item jqueryStack Overflow