在ul中使用Jquery获取总计数

Get the total count using Jquery in ul

本文关键字：获取 Jquery ul      更新时间：2023-09-26

以下是我的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/

下面是我所做的一个JSFiddle。

基本上，我在所有跨度中添加了一个带有count的类，并在每个li中循环，以添加li中每个跨度的总数。但我建议在跨度中使用一个数据属性（带有total count的<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 + ")"); 
    });
});
相关文章：