javascript - 如何获得 li 标签总数

Question

我需要获取 li 标签 的总数，这些标 checkout 现在 span 标签之后和 ul 标签内。

获取 li 标签计数后，我必须在 span 标签内更新它(与我的 HTML 代码类似)。

HTML代码

<ul id='navigation'>
    <li>
        <ul>
            <li class='IS'><span>4</span>
<!--This span value should be four as its adjucent ul contains 4 lis-->
            <ul>
                <li><span>3</span>
<!--This span value should be four as its adjucent ul contains 3 lis-->
                    <ul>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                </li>
                <li><span>5</span>
<!--This span value should be four as its adjucent ul contains 5 lis-->
                    <ul>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                </li>
                <li><span>4</span>
<!--This span value should be four as its adjucent ul contains 4 lis-->
                    <ul>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                </li>
                <li><span>4</span>
<!--This span value should be four as its adjucent ul contains 4 lis-->                    
                    <ul>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                </li>
            </ul>
            </li>
        </ul>
    </li>
</ul>

Jquery代码

$("#navigation ul li span+ul>li").each(function(){
cnts=$(this).length
console.log(cnts)
$("#navigation ul li span").html(cnts)
})

我已经在 span 标签中手动填写了我所需的 Li 标签计数输出。 我的 jquery 没有提供所需的结果。 任何建议都会有所帮助。

Answer 1

$("#navigation ul li span").text(function(){
    return $(this).next('ul').children('li').length;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id='navigation'>
    <li>
        <ul>
            <li class='IS'><span></span>
<!--This span value should be four as its adjucent ul contains 4 lis-->
            <ul>
                <li><span></span>
<!--This span value should be four as its adjucent ul contains 3 lis-->
                    <ul>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                </li>
                <li><span></span>
<!--This span value should be four as its adjucent ul contains 5 lis-->
                    <ul>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                </li>
                <li><span></span>
<!--This span value should be four as its adjucent ul contains 4 lis-->
                    <ul>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                </li>
                <li><span></span>
<!--This span value should be four as its adjucent ul contains 4 lis-->                    
                    <ul>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                </li>
            </ul>
            </li>
        </ul>
    </li>
</ul>

只需使用 text() 方法:

$("#navigation ul li span").text(function(){
    return $(this).next('ul').children('li').length;
});