如何为下拉框创建一个动态标签，显示其中的元素数量?

Question

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

简单地说，我在我的网站上有一个侧边栏，它有a - Z类别的YouTube系列列表。这是它的样子。如果需要的话，你也可以在这里查看整个过程。它现在看起来很好，但我想要一个动态计数器来记录每个下拉列表中级数的数量。例如，如果'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"(将其与其他不相关的uls分开)，然后计算其中的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

我稍微修改了一下你的HTML，只是把输入放在标签后面:更容易更新innerhtml

我把你确切的html放回去了。并修改脚本

count_series();
function count_series() {
document.querySelectorAll('.series-list').forEach(el => {
let elToChange = el.previousElementSibling.firstChild;
let txt = elToChange.textContent.trim().slice(0, 1);
txt = txt + ' ' + el.children.length;
elToChange.textContent = txt;
});
}

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

Answer 2

试试这样:

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>