如何通过JQuery分别计算同class父容器下子元素的数量

你的问题在于$('.parent').children('.child').length会选中所有.parent下的.child元素，直接返回它们的总数量。要分别统计每个.parent容器的子元素数量，你需要逐个遍历并处理每个父容器，而不是一次性统计全部。

方法1：用jQuery的.each()逐个遍历统计 #

这是最直观的实现方式，能直接针对每个父容器单独计算：

// 遍历每一个class为parent的元素
$('.parent').each(function(index) {
  // 用$(this)指代当前遍历到的父容器，统计它的直接子元素child的数量
  const currentChildCount = $(this).children('.child').length;
  // 输出结果，index从0开始，所以加1让序号更直观
  console.log(`第${index + 1}个.parent容器下的.child数量：${currentChildCount}`);
  
  // 可选：把统计结果绑定到父容器上，方便后续页面使用
  $(this).attr('data-child-count', currentChildCount);
});

方法2：收集所有统计结果到数组 #

如果需要把每个父容器的统计结果统一存储起来后续使用，可以这样写：

const allChildCounts = [];
$('.parent').each(function() {
  // 将每个父容器的child数量推入数组
  allChildCounts.push($(this).children('.child').length);
});
// 此时allChildCounts数组会是[4,4]，对应两个parent容器的子元素数量
console.log(allChildCounts);

补充说明 #

• $(this)在.each()的回调里，专指当前正在处理的那个.parent元素，这是实现单独统计的核心。
• 如果你的.child元素不是直接子元素（比如嵌套在其他标签里），可以把.children('.child')换成.find('.child')，这样会查找当前父容器下所有层级的.child元素。

内容的提问来源于stack exchange，提问作者teja kambam