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

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

我在这里创建了一个JSFIDLE来演示这个列表以及我试图实现的目标。我确信这可以通过Jquery实现，但我不确定如何实现，也不知道如何寻找一些指导

在我的示例中，我在数字

34

中进行了硬编码，我希望根据下面的列表动态生成数字

我注释的HTML代码粘贴在下面，但可能更容易在上下文中看到，结果在

项目x
y项目
项目z
y项目
项目z
y项目
项目z

一种可能的解决方案：

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

演示：一种可能的解决方案：

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

演示：代码（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]);
 }
}

var ul=document.getElementById（“myul”）；
var liNodes=[]；
对于（var i=0；i

code（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]);
 }
}

var ul=document.getElementById（“myul”）；
var liNodes=[]；
对于（var i=0；i

另一个选项

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

另一种选择

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

---

谢谢你的回答，我只做了一次跟进。当我将项目拖放到列表中时，是否可以动态计算数字。我在这里对您的示例进行了更新-您可以看到，您可以在列表之间拖动

项，但数字没有明显更新。我想知道是否有可能使代码可以被多次调用，将其包装在一个命名函数中。然后在需要的地方调用该函数。唯一的限制条件是函数必须始终在作用域内。@Redwall您可以使用

update

事件进行

sortable

：。非常感谢您的帮助…我想在我进行第一次拖放之前，唯一的问题是数字是34（硬编码的数字）。我想更新会在那时发生。有没有一种方法可以在加载HTML时启动更新，这样我就可以从一开始就有正确的数字？谢谢你的回答，我刚刚进行了一次跟进。当我将项目拖放到列表中时，是否可以动态计算数字。我在这里对您的示例进行了更新-您可以看到，您可以在列表之间拖动

项，但数字没有明显更新。我想知道是否有可能使代码可以被多次调用，将其包装在一个命名函数中。然后在需要的地方调用该函数。唯一的限制条件是函数必须始终在作用域内。@Redwall您可以使用

update

事件进行

sortable

：。非常感谢您的帮助…我想在我进行第一次拖放之前，唯一的问题是数字是34（硬编码的数字）。我想更新会在那时发生。有没有一种方法可以在加载HTML时启动更新，这样我就可以从一开始就拥有正确的数字？