顯示第一項jquery

Question

我有一個類似這樣的列表：

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

這不起作用......我可以通過哪些方式使其工作？ 試過幾次，有點卡住了。

Answer 1

這應該做的伎倆：

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

如果listElement類有更多元素：

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

（僅顯示/隱藏listElement S作一class 包含 semiUniqueCLass ）

要顯示每個獨特的 semiUniqueCLass*項目中的第一個，請查看Jack的答案或xdazz的答案 。

Answer 2

只需使用.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();
});

還有工作演示 。

Answer 3

要顯示每個唯一的 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的兩個解決方案進行了這個答案 。 這個答案排在首位，亞軍的速度慢了約30％（在Chrome中）。

Answer 4

此代碼顯示第一項：

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