Javascript 显示第一项jquery

我有一份类似这样的清单：

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

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

---

这不管用。。。我可以用什么方法让它工作？试了几次，有点卡住了

这应该可以做到：

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

如果有更多元素使用

liselement

类：

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

（仅显示/隐藏具有包含

半唯一类的
类的
列表元素
）

要显示每个唯一的
semiUniqueCLass*
项的第一个，请查看“或”。
只需使用以下方法即可


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

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

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

此代码显示第一项：

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

要显示每个唯一的
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();
  }
});

它显示元素
1
、
4
和
6

更新

我已将这个答案与实际情况作了比较。这个答案排在最前面，亚军的速度慢了约30%（在Chrome中）。
再次查看代码<代码>半唯一类
不是类。你的选择器坏了。@FlorianMargaine:哎呀，修好了。它仍然不能正确回答问题。显然，OP的提问就像他有其他
列表元素
，但只想显示第一个
半唯一类
，而只隐藏另一个
半唯一类
（而不是另一个
列表元素
）。虽然不确定正则表达式是否正确，但我对jQuery选择器不够精通：-）。但是OP的代码在
唯一类
属性中显示
半唯一类
，等等。我担心您的代码会隐藏所有以
半唯一类
开头的元素，但第一个元素除外，即使OP只想显示每个半唯一类的第一个。i、 e.他会想隐藏第一个
semiUniqueClassOne
，第一个
semiUniqueClassSecond
，等等。当你说“第一”时，你的意思是你想要每个的第一个：semiUniqueClassOne，semiuniqueclass2，semiuniqueclass3？是的，没错，semiUniqueClassOne的第一个应该显示，但是，SemiUniqueClass2的第一个应该显示，而SemiUniqueClass3的第一个不是非常有效的代码。它将显示第一个项目，显示的项目数量与原来的项目数量相同。@FlorianMargaine第二个解决方案如何？很好。也许不是最有效的，但绝对是一个简洁的解决方案。：）好消息是第二种方法速度更快。第二种解决方案非常有效！非常感谢！很抱歉延迟了答复，请接受。我在办公桌旁睡着了。哈哈。因为它没有回答问题。为什么你要指向
listElement
OP想要首先显示所有的唯一类
[semiUniqueCLassOne，SemiUniqueClass2，SemiUniqueClass3]
你明白了吗？为了得到更好的答案，你可以将类放在jQuery的选择器中。这样，无需检查匹配项。
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();
  }
});