如何统计包含2个嵌套层级的顶级div元素数量

判定逻辑 #

和示例的统计规则完全匹配，目标元素需要同时满足：

• 是顶级div：父元素不是div，不会被其他div嵌套包裹
• 内部div最大嵌套深度为2：即从该div开始往下，最多有一层子级div嵌套，不存在更深的div层级
  你提供的示例结构中，3个最外层div都满足以上条件，因此统计结果为3，和预期一致。

浏览器端原生JS实现 #

不需要依赖任何第三方库，直接运行即可得到准确结果：

// 递归计算元素下的div最大嵌套深度
function getMaxDivDepth(el, currentDepth = 1) {
  const childDivs = [...el.children].filter(child => child.tagName === 'DIV');
  if (!childDivs.length) return currentDepth;
  return Math.max(...childDivs.map(child => getMaxDivDepth(child, currentDepth + 1)));
}

// 筛选所有顶级div：父节点不是div的div元素
const topDivs = [...document.querySelectorAll('div')].filter(div => div.parentElement.tagName !== 'DIV');

// 统计嵌套深度为2的顶级div数量
const result = topDivs.filter(div => getMaxDivDepth(div) === 2).length;

console.log('统计结果：', result);

效果说明 #

将你提供的示例HTML结构加载到页面中运行上述代码，最终输出的统计值为3，完全匹配预期。
注意：如果某个顶级div内部的子div还嵌套了新的div，该元素的嵌套深度会达到3层以上，会被自动排除，不会被计入统计。如果需求是「顶级div下直接包含2个子div，不限制后续嵌套深度」，只需要把统计逻辑替换为计算每个顶级div的直接子div数量即可。

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