如何使用jQuery统计含canvas的form-group类div内的canvas元素数量

完全可以通过jQuery实现你要的统计需求，具体实现逻辑和代码如下：

核心实现思路 #

• 用jQuery的:has()选择器筛选出内部包含canvas元素的.form-group类div
• 对筛选出的每个div，统计后代canvas元素的数量即可

完整代码示例 #

// 1. 筛选出所有内部包含canvas的form-group
const $targetGroups = $('.form-group:has(canvas)');
// 2. 统计所有符合条件的form-group内的canvas总数量
const totalCanvasCount = $targetGroups.find('canvas').length;
console.log('所有符合条件的canvas总个数：', totalCanvasCount); // 示例DOM中输出3

// 如果需要逐个获取每个form-group对应的canvas数量，可以遍历
$targetGroups.each(function() {
  const rowNum = $(this).data('row'); // 获取当前行的data-row值
  const rowCanvasCount = $(this).find('canvas').length;
  console.log(`第${rowNum}个form-group内的canvas个数：`, rowCanvasCount); 
  // 示例DOM中依次输出 第3个：2，第4个：1
});

代码说明 #

• :has()选择器是jQuery提供的过滤选择器，会匹配所有包含指定后代元素的父元素，刚好符合你筛选带canvas的form-group的需求
• find('canvas')会在当前元素的所有后代节点中查找canvas元素，返回的jQuery对象的length属性就是元素总个数
• 如果你需要根据data-column属性做额外筛选，也可以在find里加属性选择器，比如统计某一列的canvas数量可以用find('canvas[data-column="1"]')

内容的提问来源于stack exchange，提问作者saj sta