为具有相同data-id属性的DOM元素添加相同上标

原代码的核心问题是每次循环都直接递增footnoteNumber，完全没考虑data-id的重复情况。要实现相同data-id的元素共用同一个上标编号，我们需要先建立data-id到编号的映射关系，遍历元素时根据映射来分配编号，而不是盲目递增。

修改后的完整代码如下：

HTML（无需改动） #

<span class='disclosure' data-id="test1">Footnote</span>
<span class='disclosure' data-id="test2">Another footnote</span>
<span class='disclosure' data-id="test3">Another footnote</span>
<span class='disclosure' data-id="test1">Another footnote</span>

修改后的JS代码 #

let disclosureElement = document.querySelectorAll('span[data-id]'),
    disclosureArray = [],
    footnoteNumber = 1,
    // 新增映射对象，记录每个data-id对应的编号
    idToNumber = {};

function createDisclosureArray() {
    for (let i = 0, max = disclosureElement.length; i < max; i++) {
        let fragmentId = disclosureElement[i].dataset.id;
        let uniqueIdString = Math.random().toString(16).slice(2, 8);
        
        // 检查当前data-id是否已有对应的编号
        if (!idToNumber[fragmentId]) {
            idToNumber[fragmentId] = footnoteNumber;
            footnoteNumber++;
        }
        
        // 从映射中获取当前id对应的编号
        const currentNumber = idToNumber[fragmentId];
        
        disclosureArray.push({
            fragmentId: fragmentId,
            anchorId: fragmentId + '-' + uniqueIdString,
            superScript: currentNumber
        });
        
        const anchorTag = document.createElement('a');
        anchorTag.setAttribute('href', '#' + disclosureArray[i].anchorId);
        anchorTag.setAttribute('class', 'disclosureAnchor');
        
        const sup = document.createElement('sup');
        const fragment = document.createDocumentFragment();
        
        const superScript = fragment
            .appendChild(anchorTag)
            .appendChild(sup);
            
        superScript.textContent = '[' + currentNumber + ']';
        disclosureElement[i].append(fragment);
    }

    return disclosureArray;
}

createDisclosureArray();

关键改动说明 #

• 新增idToNumber对象：专门用来存储每个data-id对应的上标编号，确保相同id复用同一个编号。
• 编号分配逻辑优化：遍历元素时先判断data-id是否在映射中，只有首次遇到的id才会分配新编号并递增footnoteNumber。
• 统一编号来源：所有需要使用编号的地方（数组的superScript字段、上标文本）都从idToNumber映射中获取，避免重复编号。

这样修改后，两个data-id="test1"的元素都会显示[1]，test2显示[2]，test3显示[3]，完全符合需求。

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