是否动态隐藏除第一个唯一数据属性外的所有数据？

Question

我如何使用jQuery使用CSS / Jquery隐藏除数据属性的第一个实例以外的所有实例？

示例：

 <ul>
  <li data-animal-type="bird">Owl</li>
  <li data-animal-type="fish">Salmon</li> 
  <li data-animal-type="spider">Tarantula</li>
  <li data-animal-type="spider">GreyWidow</li> 
 </ul>

所以在这个例子中，“greywidow”不会显示。它需要动态工作，因为数据类型属性和内容是未知的。

Answer 1

要实现此目的，您可以循环遍历每个li元素，并检查该元素是否为:first具有给定data-animal-type的元素：

$('li').each(function() { 
  var $li = $(this);
  $li.toggle($li.is($('li[data-animal-type="' + $li.data('animal-type') + '"]:first')));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li data-animal-type="bird">Owl</li>
  <li data-animal-type="fish">Salmon</li>
  <li data-animal-type="spider">Tarantula</li>
  <li data-animal-type="spider">GreyWidow</li>
</ul>