如何为下拉框创建动态标签以显示其内部元素数量？

需求：网站侧边栏A-Z分类对应YouTube节目，要给每个下拉框的字母标签旁添加动态计数器，实时显示分类下的节目数量（过滤内容后计数器需同步更新）。

现有HTML结构片段 #

<li>
    <label>
        A
        <input type="checkbox">
    </label>  
    <ul>
    </ul>
</li>
<li>
    <label>
        B
        <input type="checkbox">
    </label>    
    <ul class="series-list">
        <ol>series...</ol>
        <ol>series...</ol>
        <ol>series...</ol>
        <ol>series...</ol>
        <ol>series...</ol>
    </ul>
</li>

之前尝试的问题代码 #

let dropdowns = document.querySelectorAll('series-list');
var count;

for (let i = 0; i < length.dropdowns; i++) {
    count = dropdowns[i];
    console.log(count);
}

问题点：

• 选择class时漏加.，正确写法应为.series-list
• 遍历长度逻辑错误，应该是dropdowns.length而非length.dropdowns

解决方案代码 #

function updateCounters() {
    // 获取所有带series-list类的下拉列表容器
    const seriesLists = document.querySelectorAll('.series-list');
    
    seriesLists.forEach(list => {
        // 统计当前列表内的节目数量（ol元素的个数）
        const itemCount = list.querySelectorAll('ol').length;
        // 找到对应的字母label（ul的前一个兄弟元素就是label所在节点）
        const label = list.previousElementSibling;
        
        // 检查label里是否已有计数器元素，避免重复创建
        let counterSpan = label.querySelector('.category-counter');
        if (!counterSpan) {
            counterSpan = document.createElement('span');
            counterSpan.className = 'category-counter';
            // 把计数器插入到字母和checkbox之间
            label.insertBefore(counterSpan, label.querySelector('input'));
        }
        
        // 更新计数器文本
        counterSpan.textContent = `(${itemCount})`;
    });
}

// 页面加载完成后初始化计数器
document.addEventListener('DOMContentLoaded', updateCounters);

// 注意：在内容过滤函数执行完成后，需调用updateCounters()同步更新，示例：
// function filterContent() {
//     // 你的过滤逻辑代码
//     updateCounters(); // 更新计数器
// }

可选样式优化 #

给计数器添加样式提升可读性：

.category-counter {
    margin-left: 8px;
    color: #666;
    font-size: 0.9em;
}

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