请考虑以下HTML:

<div aria-roledescription="carousel" data-disliderguid="slider772" class="di-slider slider772-slider gmus-1800x760-slider">
<div class="swiper-container">
<div class="swiper-wrapper">
<div
   class="di-slide swiper-slide"
   data-guid="slide2221"
   data-screen="desktop"
   data-title="995_2024_All_Hummer_Evergreen_2024_DWC"
   data-id="2221"
   data-filtervalue=""
   data-swiper-autoplay="3000">
   
   <div class="di-slider-disclaimer">
      <button class="di-slider-disclaimer-toggle" aria-expanded="false">
      <span class="inactive-label">Important Information</span>
      <span class="active-label">Hide Information</span>
      </button>
      <div class="di-slider-disclaimer-container">
         <div class="di-slider-disclaimer-contents">
            Preproduction and simulated models shown throughout. Actual production model may vary. HUMMER EV is available from a GMC EV dealer.                                
         </div>
      </div>
   </div>
   <a class="di-slider-link"
      aria-hidden="true"
      href="/new-vehicles/?_dFR%5Byear%5D%5B0%5D=2024&_dFR%5Bmake%5D%5B0%5D=GMC&_dFR%5Bmodel%5D%5B0%5D=HUMMER+EV&_dFR%5Bmodel%5D%5B1%5D=HUMMER+EV+SUV&_dFR%5Bmodel%5D%5B2%5D=HUMMER+EV+Pickup"
      title=""
      tabindex="-1"
      >
      <picture class="slide-image">
         <source media="(max-width: 767px)"                                     srcset="https://gtmassets.dealerinspire.com/9061-995_2024_All_Hummer_Evergreen_2024_DWC_600x400.jpg">
         <source media="(min-width: 768px)"
            srcset="https://gtmassets.dealerinspire.com/9061-995_2024_All_Hummer_Evergreen_2024_DWC_1800x760.jpg">
         <img src="https://gtmassets.dealerinspire.com/9061-995_2024_All_Hummer_Evergreen_2024_DWC_1800x760.jpg"                                      alt="GMC HUMMER EV PICKUP AND SUV"
            style=""
            width="1800" height="760">
      </picture>
   </a>
</div>
<div
   class="di-slide swiper-slide"
   data-guid="slide950"
   data-screen="desktop"
   data-title="Generic"
   data-id="950"
   data-filtervalue=""
   >
<picture class="slide-image">
   <source media="(max-width: 767px)"                                     srcset="https://di-uploads-development.dealerinspire.com/robertsonsgmc-winback0123/uploads/2023/03/Group-of-2023-GMC-Terrain-SUVs-parked-on-beach_mobile.jpg">
   <source media="(min-width: 768px)"
      srcset="https://di-uploads-development.dealerinspire.com/robertsonsgmc-winback0123/uploads/2023/03/Group-of-2023-GMC-Terrain-SUVs-parked-on-beach-1800x760.jpg">
   <img src="https://di-uploads-development.dealerinspire.com/robertsonsgmc-winback0123/uploads/2023/03/Group-of-2023-GMC-Terrain-SUVs-parked-on-beach-1800x760.jpg"                                      alt="Group of 2023 GMC Terrain SUVs parked on beach"
      style="visibility:hidden"
      width="1800" height="760">
</picture>

我正在try 使用Cherrio通过SCrapeNimpa返回Div类dilider的子级的所有图像的SRC,如HTML代码片段的第一行所示.所有图像都属于HTML图片对象,并且都有一个类似的div类.然而,我想要返回的唯一链接是值.

当我try 在他们的Sandbox 上运行以下代码时:https://scrapeninja.net/cheerio-sandbox/basic,我得到一个错误"Error:Expect Name,Found://gtmassets.dealerinspire.com/9061-995_2024_All_Hummer_Evergreen_2024_DWC_1800x760.jpg on Line 19"

下面是我收到的错误:

// define function which accepts body and cheerio as args
function extract(input, cheerio) {
    // return object with extracted values              
    let $ = cheerio.load(input);
    var listItems = $(".di-slider");
    listItems.each(function(idx, picture) {
    let image= $(picture).find('img').attr('src'); 
    return {
        source: $(image)
    };
});
    
}

我承认,我在JS上并不是最棒的,我已经很多年没有使用jQuery了,这是我第一次try 使用cheiio或scrapeninca.

我在https://pixeljets.com/blog/cheerio-sandbox-cheatsheet/#iterate-over-children-and-return-them-as-an-array-of-objects岁时审阅了文档,并在How to get image url by cheerio?的基础上构建了我的函数

根据下面接受的答案,下面是完整的工作片段

function extract(input, cheerio) {
  const $ = cheerio.load(input);
  return [...$(".di-slider")].map(e => ({
    sources: [...$(e).find("img")].map(e => $(e).attr("src"))
  }));
}

推荐答案

以下是几个问题:

  1. 崩溃的主要原因是您正在将一个字符串放入一个Cheerio对象:$("https://gtmassets.dealerinspire.com...").把这里的$()go 掉.
  2. .forEach/.each不返回值.您从中返回的任何内容都将被忽略.另一方面,.map使用回调返回的所有值分配array.这是这项工作的最佳功能.您也可以将每一项都压入数组变量,但这是map抽象的明确目的.
  3. 你需要从extract()退回一些东西.Formatting your code可能会让人更容易注意到这一点.

工作代码:

function extract(input, cheerio) {
  const $ = cheerio.load(input);
  return [...$(".di-slider")].map(e => ({
    source: $(e).find("img").attr("src")
  }));
}

要获取每个滑块中所有图像的全部src个属性,可以使用嵌套贴图:

function extract(input, cheerio) {
  const $ = cheerio.load(input);
  return [...$(".di-slider")].map(e => ({
    sources: [...$(e).find("img")].map(e => $(e).attr("src"))
  }));
}

Javascript相关问答推荐

是什么原因导致此Angular 16电影应用程序中因类型错误而不存在属性?

Vega中的模运算符

在React中获取数据后,如何避免不必要的组件闪现1秒?

未捕获错误:在注销后重定向到/login页面时找不到匹配的路由

使用javascript将Plotly Expandable Sparkline转换为HighCharter Plot在bslib卡中

v—自动完成不显示 Select 列表中的所有项目

如何将Openjphjs与next.js一起使用?

Regex结果包含额外的match/group,只带一个返回

Next.js服务器端组件请求,如何发送我的cookie token?

用于部分字符串的JavaScript数组搜索

如何找到带有特定文本和测试ID的div?

在Java脚本中录制视频后看不到曲目

如果NetSuite中为空,则限制筛选

React Refs不与高阶组件(HOC)中的动态生成组件一起工作

通过解构/功能组件接收props-prop验证中缺少错误"

在高位图中显示每个y轴系列的多个值

AstroJS混合模式服务器终结点返回404

如何使用fltter_js将对象作为参数传递给javascrip?

如何调整下拉内容,使其不与其他元素重叠?

对象作为react 子对象无效(已找到:具有键的对象{type,props}).如果要呈现一个子级集合,请改用数组