如何在Cheerio中选择各分支里最深层级的div子元素？

当然可以实现！不管是选择全局最深层的DOM元素，还是特指div分支里的最深层子元素，Cheerio都有对应的解决方案，我给你详细说明：

一、选择所有最深层的div元素（各分支的最底层） #

你的核心需求是找出没有子div元素的div——因为如果一个div下面还嵌套了div，那它肯定不是所在分支的最深层；反之，没有直接子div的div，就是该分支的终点。

方法1：使用CSS选择器（简洁高效） #

Cheerio支持:has伪类选择器（1.0及以上版本），可以直接写出目标选择器：

const $ = cheerio.load(yourHtml);
const deepestDivs = $('div:not(:has(> div))');

这个选择器的逻辑是：

• div：选中所有div元素
• :not(:has(> div))：排除那些直接包含子div的元素，剩下的就是各分支的最深层div。

用你的示例HTML测试的话，这个选择器会选中#selectThis、#selectThisAlso、#selectThisAsWell，以及你标注的#dontSelectThisSinceThereIsADeeperDiv——这里可能你示例的标注有点小误会，这个div本身没有子div，确实是它所在分支的最深层，如果不需要选中它，你可以给它加额外的过滤条件（比如排除某个父级下的元素）。

方法2：遍历过滤（兼容性更好） #

如果你的Cheerio版本不支持:has，可以用手动遍历过滤的方式：

const $ = cheerio.load(yourHtml);
const deepestDivs = $('div').filter(function() {
  // 判断当前div是否没有直接子div
  return $(this).children('div').length === 0;
});

这个方法通过检查每个div的直接子元素中是否存在div，来筛选出最深层的元素，兼容性拉满。

二、限定某个父元素下的最深层div #

如果只需要从特定父元素（比如示例中的#parent）下选择，可以在选择器前加上父元素的限定：

// 方法1的限定版
const parentDeepestDivs = $('#parent div:not(:has(> div))');

// 方法2的限定版
const parentDeepestDivs = $('#parent div').filter(function() {
  return $(this).children('div').length === 0;
});

这样就精准定位到目标父元素下所有分支的最深层div了。

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