javascript - 在 ul 中使用 Jquery 获取总计数

Question

以下是我的ul li结构

<ul>
<li> <a href="#">Top Level </a>

    <ul>
        <li> <a href="#">Level 1_1</a>

            <ul>
                <li> <a title="" class="grower OPEN">Level 2_1</a>

                    <ul>
                        <li> <a title="" href="#">Level 3_1 </a><span>(1)</span>
                        </li>
                        <li> <a title="" href="#">Level 3_2 </a><span>(4)</span>
                        </li>
                    </ul>
                </li>
                <li>    <a href="#">Level 2_2 </a>

                    <ul>
                        <li>    <a href="#">Level 3_1 </a><span>(5)</span>
                        </li>
                        <li>    <a href="#">Level 3_2 </a><span>(1)</span>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
        <li> <a href="#">Level 1_2 </a>

            <ul>
                <li>    <a title="" href="#">Level 2_1 </a><span>(3)</span>
                </li>
            </ul>
        </li>
        <li>    <a title="" href="#">Level 1_3 </a><span>(2)</span>
        </li>
        <li>    <a title="" href="#">Level 1_4 </a><span>(1)</span>
        </li>
    </ul>
</li>

我有显示的产品数量以及较低级别的类别。我想要的是，使用 jquery 显示每个类别的父项的总计数。我不知道该怎么做。

当前系统:http://jsfiddle.net/jvfwhs3f/1/

所需输出:http://jsfiddle.net/fz554136/

Answer 1

这是一个 JSFiddle我所做的。

基本上，我向所有带有计数的跨度添加了一个类，并遍历每个 li 以添加 li 中每个跨度的总数。但我建议在您的跨度中使用数据属性( <span count="5">(5)</span>) 与总计数，以便您可以直接使用 parseInt($(this).data('count')) 解析数字

$(document).ready(function(){    
    $('ul li').each(function(){
        var $this = $(this);
        var totalSpan = $this.find('span.green');
        var total = 0;
        $this.find('span.total').each(function(){
            total += parseInt($(this).text().replace(/[^0-9]+/g, '')); 
        });
        totalSpan.html("(" + total + ")"); 
    });
});