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个class，包含 semiUniqueCLass）

要显示每个唯一 semiUniqueCLass*项的第一项，请查看Jack的Answer或xdazz的{{{ 3}}

Answer 2

只需使用.first()方法。

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

的 And the working demo 的

另一种解决方案如下所示：

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

的 Also the working demo 的

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。

<强>更新

我已使用two solutions by xdazz对this jsperf benchmark进行了此答案。这个答案排在首位，亚军的速度慢了约30％（在Chrome中）。

Answer 4

此代码显示第一项：

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

显示第一项jquery

4 个答案: