如何通过jQuery过滤子div并统计不同data-customId属性值的数量？

要统计选中元素中data-customId的不同值数量，核心是提取所有属性值后去重，你之前的代码没处理去重，而且DOM元素的属性调用方式有误，以下是可行方案：

问题分析 #

你之前的代码存在两个问题：

1. div.map(div => div.data-customId)中的div是原生DOM元素，不是jQuery对象，无法直接使用.data()方法；
2. 即使正确提取了所有值，也没有做去重处理，所以长度还是元素总数而非不同值的数量。

方案一：jQuery + Set去重 #

// 选中目标元素
var divs = $(`div[id*="child_"]`);
// 提取所有data-customId值，转成数组后用Set去重
var uniqueIds = new Set(
  divs.map(function() {
    // 用jQuery的data方法获取属性值，或用this.dataset.customId（原生方式）
    return $(this).data('customId');
  }).get() // 将jQuery对象转成原生数组
);
// Set的size就是不同值的数量
var count = uniqueIds.size; // 结果为4

方案二：原生JS实现（无需jQuery） #

如果项目可以不用jQuery，原生方式更高效：

// 选中目标元素
var divs = document.querySelectorAll(`div[id*="child_"]`);
// 用Set存储唯一值
var idSet = new Set();
divs.forEach(div => {
  // 原生DOM元素通过dataset获取data属性，连字符转驼峰
  idSet.add(div.dataset.customId);
});
var count = idSet.size; // 结果为4

方案三：传统对象键值对去重（兼容旧环境） #

如果需要兼容不支持Set的旧浏览器，可以用对象存储唯一值：

var divs = $(`div[id*="child_"]`);
var idMap = {};
divs.each(function() {
  var customId = $(this).data('customId');
  // 用属性名存储唯一值，重复值会被覆盖
  idMap[customId] = true;
});
// 对象的键的数量就是不同值的数量
var count = Object.keys(idMap).length; // 结果为4

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