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

Question

如何通过CSS/Jquery使用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元素，并检查该元素是否是具有给定data-animal-type的:first元素

​

$('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>

​