如何遍历同class元素并按apptId去重提取唯一时间？

原始HTML结构 #

<div class="Selected">This Is selected
   <div class="apptId">4320573</div>
   <div class="details"><span class="timestamp">Due at 09:00</span></div>
</div>
<div class="Selected">This Is selected
   <div class="apptId">4320573</div>
   <div class="details"><span class="timestamp">Due at 09:00</span></div>
</div>
<div class="Selected">This Is selected
   <div class="apptId">9852183</div>
   <div class="details"><span class="timestamp">Due at 12:00</span></div>
</div>

现有统计代码 #

var po_list_number = document.querySelectorAll('.Selected').length;
alert(po_list_number);

需求说明 #

需要判断class为Selected的div中是否存在apptId内容重复的项，重复项仅计数一次，同时提取对应的唯一时间，最终生成无重复的时间列表。

实现方案 #

利用Map的键唯一性特性实现去重，代码如下：

// 获取所有目标元素
const selectedElements = document.querySelectorAll('.Selected');
// 用Map存储唯一的apptId与对应时间
const uniqueAppointments = new Map();

selectedElements.forEach(element => {
    // 提取apptId文本内容
    const apptId = element.querySelector('.apptId').textContent.trim();
    // 提取时间文本内容
    const timestamp = element.querySelector('.timestamp').textContent.trim();
    // 存入Map，重复的apptId会自动覆盖，保证唯一性
    uniqueAppointments.set(apptId, timestamp);
});

// 去重后的统计数量
const uniqueCount = uniqueAppointments.size;
// 生成无重复的时间列表
const uniqueTimestamps = Array.from(uniqueAppointments.values());

// 结果输出示例
alert(`去重后的有效项数量：${uniqueCount}`);
console.log('无重复时间列表：', uniqueTimestamps);

代码说明 #

• Map的键具有天然唯一性，可自动过滤重复的apptId
• 遍历所有Selected元素，提取所需内容并存入Map
• 通过Map.size获取去重后的计数，Array.from(Map.values())直接得到所有唯一时间的数组

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