Web抓取时如何获取不同父节点下的对应图片和文本并关联？

错误原因 #

1. 文本获取失败：img节点嵌套在.image容器内，.text容器和.image是同级节点，共同父级为.thumbnail。直接调用$img.siblings('.text')是查找img的同级元素，无法匹配到目标节点。如果要保留遍历img的写法，需要先调用$img.closest('.thumbnail')找到共同父级，再查找父级下的.text节点。
2. 图片地址拼接错误：原代码使用location.origin + imgText拼接的是文本内容而非图片地址，需要先提取img的src属性后再做拼接。

推荐修复代码 #

更稳妥的写法是直接遍历每个.thumbnail节点，在每个独立容器内分别提取图片和文本，避免关联错误：

const group: { [key: string]: string } = {};
this.$('.thumbnail')
  .get()
  .forEach(thumbnail => {
    const $thumb = this.$(thumbnail);
    // 提取图片地址
    const imgSrc = $thumb.find('.image img[src]').attr('src') || '';
    // 提取对应文本
    const imgText = $thumb.find('.text').text().trim();
    // 非空校验后存入
    if (imgSrc && imgText) {
      // 绝对路径直接使用，相对路径拼接站点根地址
      const fullImgUrl = imgSrc.startsWith('http') ? imgSrc : `${location.origin}/${imgSrc.replace(/^\//, '')}`;
      group[imgText] = fullImgUrl;
    }
  });
const Type = { 'Fruit': group };

补充说明 #

• 若抓取的目标站点图片为相对路径，除了location.origin也可以直接替换为目标站点的根地址，避免运行环境域名和目标站点不一致导致拼接的地址不可用。
• 若存在多个条目文本重复的情况，使用文本作为对象key会出现值覆盖，建议改为数组存储，或者给key加上索引等唯一标识。

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