jQuery或Cheerio如何提取匹配指定层级结构的包裹HTML？

核心思路 #

完全借助CSS选择器本身的逐层匹配能力完成结构过滤，不需要手动写多层级校验逻辑：

• 先用目标选择器 h1+ul>li>details>summary+p 匹配最内层、完全符合所有层级要求的<p>节点。这个选择器会自动过滤所有结构不匹配的情况：只要某一层关系不对（比如示例中第二个<ul>里<summary>后面跟的是<strong>而非<p>），就不会命中任何节点。
• 从命中的<p>节点向上回溯3级父节点，就能拿到对应的、和<h1>相邻的完整<ul>节点，也就是需要提取的上下文内容。

通用代码实现 #

代码完全兼容jQuery和Cheerio语法：

// $ 为加载完目标HTML后的DOM操作对象（Cheerio通过 cheerio.load(html) 获取，jQuery中为全局对象）
// 匹配所有符合完整层级路径的最内层<p>元素
const matchedPElements = $('h1+ul>li>details>summary+p');

matchedPElements.each((idx, el) => {
  // 从当前<p>向上回溯3级：<p> → <details> → <li> → 目标上下文<ul>
  const $targetContext = $(el).parent().parent().parent();
  // 输出提取到的完整HTML
  console.log('匹配到的完整上下文HTML：', $.html($targetContext));
});

针对示例的运行结果 #

套用你给出的示例HTML，最终效果为：

1. 第一个<ul>内部结构完全匹配选择器路径，会被完整提取，输出的HTML为：

   <ul class="toggle">
     <li>
       <details>
         <summary><strong>Q1</strong></summary>
         <p>Answer1</p>
       </details>
     </li>
   </ul>
   

2. 第二个<ul>因为<summary>后跟随的是<strong>而非<p>，没有节点会命中初始选择器，因此不会被提取，完全符合过滤规则。

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