javascript - 统计不同div中li元素个数的函数，当存在相同自定义值的div时合并计数

Question

我有一个通过 JavaScript 编写的过滤器复选框列表。过滤器复选框来自具有可重复值的 div。

<div value="a" class="foo">
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
</div>
<div value="b" class="foo">
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
</div>
<div value="c" class="foo">
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
</div>
<div value="c" class="foo">
    <li>list item</li>
    <li>list item</li>
</div>

我有一个包含不同 div 值的数组。 (我在这里切入正题，只是显示数组的结果，而不是我如何创建它。)

var allDivs = ["a", "b", "c", "c", "d", "e", "e", "f"]

我有一个经过过滤的数组版本，因此没有重复项。我使用这个数组生成一组过滤器复选框。

var filteredDivs = ["a", "b", "c", "d", "e", "f"]

我想做的事: 每个 div 中都包含许多列表项。

在每个过滤器复选框(来自没有重复的过滤数组)旁边，我想提供 li 元素的计数，结合重复条目中的 li 元素的数量。

这里是每个 div 中 li 元素数量的表示。

• a = 4
• b = 5
• c = 2
• c = 7
• d = 5
• e = 2
• e = 3
• f = 6

...但是结合起来(因为我有两个“c”和“e”div)，那就是:

• a = 5
• b = 5
• c = 9
• d = 5
• e = 5
• f = 6

我可以通过执行类似的操作来获得这些个人计数

$("a li").length
$("b li").length
$("c li").length

但我无法将其转化为函数。

更多上下文...过滤器复选框是这样编写的，只是为了给您一个想法。

var renderFilters = function (filteredDivs) {
    app.querySelector("#filters").innerHTML =
        filteredDivs.map(function (module, index) {
            var html =
                '<label class="filter">' +
                '<input type="checkbox" data-filter="' + filteredDivs[index] + '" checked>' +
                module + " (" + ")" // Would like the count of li items here.
            '</label>';
            return html;
        }).join('')
};

除了在唯一 div 值列表中写入作为过滤器复选框之外，我还想在括号中显示 li 项目的计数，并在适当的情况下将它们组合起来。

我不知道从哪里开始解决这个问题。我希望有人能为我指出正确的方向，以便我可以研究答案(如果有的话)。

Answer 1

你可以这样做:

var divs = document.querySelectorAll('[value]')
var values = Array.from(divs).map(d => d.getAttribute('value'));
var unique_values = Array.from(new Set(values));
var counts = unique_values.map(c => ({value: c, count: document.querySelectorAll('[value="' + c + '"] li').length}))
console.log(counts);

<div value="a" class="foo">
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
</div>
<div value="b" class="foo">
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
</div>
<div value="c" class="foo">
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
</div>
<div value="c" class="foo">
    <li>list item</li>
    <li>list item</li>
</div>