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*项目的第一个,请查看Jack 's Answerxdazz 's answer

于 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和。foursix

更新

我已经将这个答案与xdazz使用这个 jsperf benchmark的两个解决方案进行了对比。这个答案名列前茅,亚军慢了约 30%(在 Chrome 中)。

于 2013-01-31T08:25:57.103 回答
-1

此代码显示第一项:

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