如何为显示其中元素数量的下拉框制作动态标签？

Question

这应该非常简单，但我真的很难把它放在一起。

简而言之，我的网站上有一个侧边栏，其中包含用于 YouTube 系列列表的 A-Z 类别。 如果需要，您也可以在here查看整个内容。它现在可以正常工作并且看起来不错，但是我想在每个下拉列表中有一个动态计数器来记录系列数。因此，例如，如果“B”类别中有 15 个系列，则 B 旁边会有一个小“15”。

我可以只使用 HTML 来制作静态计数器，但是当您从下拉菜单中过滤掉一些元素时，问题就出现了。所以最终我想要一个脚本来计算下拉列表中的元素数量并在它旁边添加一个数字，

这是侧边栏 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>

我的想法是创建一个脚本，它会自动接收带有 class = "series-list" 的 ul（将其与其他不相关的 ul 分开），然后计算其中的 ol 元素的数量。然后，该计数将通过字母旁边的 innerHTML 插入到标签中。

到目前为止，我已经想出了一些完全什么都不做的脚本。这可能是我做过的最不可怕的，尽管它仍然很糟糕。

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

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

我应该注意到这个脚本显然没有做任何更改，因为它只是控制台记录计数。我现在只是在测试它——我什至还没有接近实际实施它。

辩解一下，我最近睡得不多，醒着的大部分时间都在写代码，所以我的脑子都炸了。

任何帮助表示赞赏。

Answer 1

尝试这样的事情：

document.querySelectorAll(".series-list").forEach(function(ul) {
  ul.previousElementSibling.firstChild.textContent += ul.children.length;
});

<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>