javascript - 动态计算并显示列表中的列表项总数？

Question

我在边栏中使用列表，我想显示该列表中有多少项目的标签编号。

我在这里创建了一个 JSFiddle http://jsfiddle.net/WRVgW/来演示列表和我想要实现的目标。我确信这可以通过 Jquery 实现，但我不确定如何以及正在寻找一些指导。

在我的示例中，我已经硬编码了34我希望根据下面的列表动态生成数字的数字。

我评论的 HTML 代码粘贴在下面，但可能更容易在http://jsfiddle.net/WRVgW/中的结果中看到它

<div id="sidebar">
<ul class="sidebarSections">
    <li class="submenu">
    <a href="#"><span>Design Projects</span><!--This is the name of the project-->
    <span class="label">34</span></a><!--This is the number which I want to display the number of li items below dynamically (should be 3)-->
        <ul>
            <li><a>Project x</a></li>
            <li><a>Project y</a></li>
            <li><a>Project z</a></li>
        </ul>
    </li>

    <li class="submenu">
    <a href="#"><span>Tech Projects</span><!--This is the name of the project-->
    <span class="label">34</span></a><!--This is the number which I want to display the number of li items below dynamically (should be 5)-->
        <ul>
            <li><a>Project x</a></li>
            <li><a>Project y</a></li>
            <li><a>Project z</a></li>
            <li><a>Project y</a></li>
            <li><a>Project z</a></li>
        </ul>
    </li>

    <li class="submenu">
    <a href="#"><span>IA Projects</span><!--This is the name of the project-->
    <span class="label">34</span></a><!--This is the number which I want to display the number of li items below dynamically (should be 7)-->
        <ul>
            <li><a>Project x</a></li>
            <li><a>Project y</a></li>
            <li><a>Project z</a></li>
            <li><a>Project y</a></li>
            <li><a>Project z</a></li>
            <li><a>Project y</a></li>
            <li><a>Project z</a></li>
        </ul>
    </li>
</ul>

Answer 1

一种可能的解决方案：

$(".submenu .label").text(function() {
  return $(this).closest(".submenu").find("li").length;
});

演示：http: //jsfiddle.net/WRVgW/1/

Answer 2

代码 (javascript) & id 你的 uls

var ul = document.getElementById("myul");
var liNodes = [];

for (var i = 0; i < ul.childNodes.length; i++) {
  if (ul.childNodes[i].nodeName == "LI") {
    liNodes.push(ul.childNodes[i]);
 }
}

Answer 3

另外一个选项

$('.sidebarSections ul').each(function(){
    var liCount = $(this).find('li').length;
    $(this).closest('.submenu').find('span.label').text(liCount);
});