如何用Cheerio从父元素中提取多个子<ul>并包裹在div中？

核心实现思路 #

要提取.things容器下所有包含子元素的<ul>，并将它们统一包裹到新的<div>中，核心是遍历目标<ul>元素，获取每个元素的完整HTML代码后再进行拼接包裹。

可行代码示例 #

const cheerio = require('cheerio');
// 示例HTML结构
const html = `
<div class="things">
  <h5>无关标题内容</h5>
  <ul>
    <li>列表项A</li>
    <li>列表项B</li>
  </ul>
  <ul>
    <li>列表项C</li>
  </ul>
  <ul></ul> <!-- 空列表会被过滤 -->
</div>
`;

const $ = cheerio.load(html);
const validUls = [];

// 遍历所有目标ul，筛选带元素的并收集完整HTML
$('.things ul').each((_, el) => {
  if ($(el).children().length > 0) {
    validUls.push($.html(el));
  }
});

// 拼接并包裹到新div中
const finalResult = `<div>${validUls.join('')}</div>`;

console.log(finalResult);

代码说明 #

• 用each()遍历所有.things ul，避开html()仅返回第一个元素的限制
• 通过children().length > 0过滤空的<ul>标签
• 调用$.html(el)获取单个<ul>的完整代码（包含标签本身）
• 将收集到的所有有效<ul>代码拼接后，包裹到新的<div>内

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