如何用jQuery统计各Div内Li数量并分别输出对应结果？

嘿，我来帮你搞定这两个jQuery问题，咱们一个一个来～

你可以用jQuery的$.each()方法来遍历所有<li>元素，这个方法会提供遍历的索引值（注意索引从0开始，所以要加1才是实际序号）。这里分两种常见场景：

• 场景1：在每个li内部显示序号
  直接遍历li，把序号插入到元素内容里：

  $("li").each(function(index) {
    // index是当前元素的索引（从0开始），加1得到序号
    const serialNumber = index + 1;
    // 给li添加序号，比如前置到内容前
    $(this).prepend(`${serialNumber}. `);
    // 同时也可以在控制台输出序号
    console.log(`第${serialNumber}个li`);
  });
  

• 场景2：仅在控制台输出所有li的序号
  如果不需要修改页面元素，只是输出数字：

  $("li").each(function(index) {
    console.log(index + 1);
  });
  

你提到之前的代码会把所有统计结果汇总到一个p标签里，这大概率是因为你没有针对每个div单独处理统计结果的输出位置。咱们需要遍历每个div时，为当前div生成对应的统计内容，而不是把所有结果都塞到同一个p里。

假设你的HTML结构类似这样：

<div class="container">
  <li>item1</li>
  <li>item2</li>
</div>
<div class="container">
  <li>item3</li>
</div>

修正后的jQuery代码如下：

// 遍历每个div
$("div").each(function() {
  // 获取当前div内部的li数量
  const liCount = $(this).find("li").length;
  // 在当前div的末尾添加一个p标签，显示统计结果
  $(this).append(`<p>当前div内的li数量：${liCount}</p>`);
  
  // 如果你页面上已经有对应每个div的p标签（比如带相同索引的统计容器），可以这样写：
  // const divIndex = $(this).index();
  // $(`p.statistic:eq(${divIndex})`).text(`当前div内的li数量：${liCount}`);
});

为什么原来的代码会汇总？ #

原来的写法可能是先定义变量累加结果，或者直接把所有内容追加到同一个p标签里，比如：

// 错误示例：汇总所有结果到同一个p
let totalText = "";
$("div").each(function() {
  const count = $(this).find("li").length;
  totalText += `div的li数量：${count} `;
});
$("p").text(totalText);

这种写法就会把所有div的统计结果都放到同一个p里，而我们需要的是每个div对应自己的统计输出，所以要在遍历每个div的过程中，直接把结果输出到当前div对应的位置。

内容的提问来源于stack exchange，提问作者Tobias Heide