使用 cheerio js 遍历节点

Question

我有这样的东西（html 代码）用 snekfetch

获取

<div class="entry-content">
<h4>today's date etc etc</h4>
    <h3>category name 1</h3>
    <p>
        <img class="aligncenter" src="img_1.png" alt="" />
    </p>
    <div></div>
    <p>
        <img class="aligncenter" src="img_2.png" alt="" />
    </p>
    <div></div>
    <h4>today's date etc etc</h4>
    <h3>category name 2</h3>
    <p>
        <img class="aligncenter" src="img_3.png" alt="" />
    </p>
    <div></div>
    <h4>today's date etc etc</h4>
    <h3>category name 3</h3>
    <p>
        <img class="aligncenter" src="img_4.png" alt="" />
    </p>
    <div></div>
</div>

我使用 cheerio 的目的是提取 img src，我设法提取了 img src 但问题是，我需要按名称对它们进行分类，例如 img_1.png 和 img_2.png 属于到 <h3> 标记类别名称 1 等等。

我想将它们存储在一个数组中，例如

 name: category 1
 src: img_1.png
 name: category 1
 src: img_2.png

对于所有其他类别名称以此类推 <h3> 标签下的 img src

snekfetch 的这个结果也可以是随机的，这意味着类别名称 1 有时有 3-4 张图片，而不是 2 张甚至可能有 1 张。

所以我想使用 cheerio 来动态检测它们，但我不确定该怎么做。

Answer 1

这个怎么样

let $ = cheerio.load(html);
let currentElement, data = {};

$(".entry-content").find("h3").each(function () {
    data[$(this).text()] = [];

    currentElement = $(this);

    while(currentElement.next().length && currentElement.next().prop("tagName").indexOf("H") === -1) {
        if (currentElement.next().find("img").length > 0) {
            data[$(this).text()].push(currentElement.next().find("img").first().attr("src"));
        }

        currentElement = currentElement.next();
    }
});

我还没有测试过这个，但逻辑应该很不错，如果不是我很乐意提供帮助

编辑我创建了一个对象，其中键是具有图片数组的类别，这样更灵活，但您可以根据自己的喜好或只是调整它问你卡不卡

使用 cheerio js 遍历节点

node traverse using cheerio js

html

jquery

cheerio