2

私はこのようなリストを持っています：

<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>

私はそれぞれの最初のものだけを表示しようとしているsemiUniqueCLassので、次のようにしようとしています：

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

これは機能しません...どのように機能させることができますか？いくつか試してみましたが、少し行き詰まりました。

4

4 に答える 4

5

これでうまくいくはずです：

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

listElementクラスにさらに要素がある場合：

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

（を含むを含むlistElementを表示/非表示にするだけです）class semiUniqueCLass

それぞれのユニークな semiUniqueCLass*アイテムの最初のものを表示するには、ジャックの回答またはxdazzの回答を見てください。

于 2013-01-31T08:11:19.860 に答える
4

.first（）メソッドを使用するだけです。

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

そして、作業デモ。

別の解決策を以下に示します。

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

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

また、作業デモ。

于 2013-01-31T08:14:21.067 に答える
2

それぞれの一意の semiUniqueCLass*アイテムの最初のものを表示するには、関連するすべての.listElementノードを手動で反復処理する必要があります。

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();
  }
});

要素、、を表示oneしfourますsix。

アップデート

このjsperfベンチマークを使用して、xdazzによる2つのソリューションに対してこの回答を提示しました。この答えは、次点者が（Chromeで）最大30％遅くなることでトップになります。

于 2013-01-31T08:25:57.103 に答える
-1

このコードは最初の項目を示しています：

$('[class^=listElement]').first().show();
于 2013-01-31T08:18:45.413 に答える