如何用更简洁的jQuery方法统计过滤后不同data-category值的数量？

原有代码结构 #

JavaScript #

$(document).ready(function(){
  $('input').on('input',function(){
    search($(this).val());
  });
});

const search = (text) => {
  $('.tile').hide();
  
  //TODO get amount of different categories
  //Possibility 1 --> using $.each()...

  $('.tile').filter(function(){
      let category = $(this).data("category");
      
      if( category.indexOf(text) !== -1 )
      {
        return $(this);
      }
  }).show();
};

HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<input type="search" />

<hr>

<div class="tile" data-category="tee">Tee</div>
<div class="tile" data-category="coffee">Coffee</div>
<div class="tile" data-category="coffee">Coffee</div>
<div class="tile" data-category="tee">Tee</div>
<div class="tile" data-category="soda">Soda</div>
<div class="tile" data-category="tee">Tee</div>
<div class="tile" data-category="tee">Tee</div>

简洁实现方案 #

不用$.each()，可以结合jQuery的过滤结果、.map()方法和原生JS的Set来快速获取唯一分类数量，代码如下：

$(document).ready(function(){
  $('input').on('input',function(){
    search($(this).val());
  });
});

const search = (text) => {
  $('.tile').hide();
  
  // 过滤并显示匹配的元素，直接保存结果复用
  const visibleTiles = $('.tile').filter(function(){
      return $(this).data("category").indexOf(text) !== -1;
  }).show();

  // 提取显示元素的分类值，转成数组后用Set去重
  const uniqueCategories = new Set(visibleTiles.map(function() {
    return $(this).data('category');
  }).get());

  // 判断是否只剩一种分类
  const isSingleCategory = uniqueCategories.size === 1;
  
  // 这里可根据判断结果执行后续逻辑，比如控制台输出
  console.log(isSingleCategory ? '仅剩余一种分类' : '存在多种分类');
};

方案说明 #

• 直接复用过滤后的visibleTiles变量，避免重复遍历DOM，提升效率
• .map().get()将jQuery对象转换为包含所有分类值的原生数组
• Set会自动去除数组中的重复值，通过size属性即可直接得到唯一分类的数量
• 最后只需判断size是否等于1，就能快速确认是否仅剩余一种分类

内容的提问来源于stack exchange，提问作者toffler