JavaScript 迭代對象列表

Question

我正在為 Skyscanner 寫一個刮板只是為了好玩。 我要做的是遍歷所有列表的列表，並為每個列表提取 URL。

到目前為止，我所做的是獲取返回的列表 $("div[class^='FlightsResults_dayViewItems']")

但我不確定如何遍歷返回的 object 並獲取 URL (/transport/flight/bos...)。 我擁有的偽代碼是

for(listings in $("div[class^='FlightsResults_dayViewItems']")) {
     go to class^='EcoTickerWrapper_itineraryContainer' 
          go to class^='FlightsTicket_container'
               go to class^='FlightsTicket_link' and get the href and save in an array
}

我將如何 go 這樣做？ 旁注，我正在使用cheerio和jquery。

更新：我發現 CSS 選擇器是

$("div[class^='FlightsResults_dayViewItems'] > div:nth-child(at_index_i) > div[class^='EcoTicketWrapper_itineraryContainer'] > div[class^='FlightsTicket_container'] > a[class^='FlightsTicket_link']").href

現在，我試圖弄清楚如何遍歷列表並為循環中的每個列表應用選擇器。

此外，似乎不包括 div:nth-child(at_index_i) 將不起作用。 有沒有解決的辦法？

$("div[class^='FlightsResults_dayViewItems'] > div:nth-child(3) > div[class^='EcoTicketWrapper_itineraryContainer'] > div[class^='FlightsTicket_container'] > [class^='FlightsTicket_link']").attr("href")

"/transport/flights/bos/cun/210301/210331/config/10081-2103010815--32733-0-10803-2103011250|10803-2103311225--31722-1-10081-2103312125?adults=1&adultsv2=1&cabinclass=economy&children=0&childrenv2=&destinationentityid=27540602&inboundaltsenabled=false&infants=0&originentityid=27539525&outboundaltsenabled=false&preferdirects=false&preferflexible=false&ref=home&rtn=1"


$("div[class^='FlightsResults_dayViewItems'] > div[class^='EcoTicketWrapper_itineraryContainer'] > div[class^='FlightsTicket_container'] > [class^='FlightsTicket_link']").attr("href")

undefined

這是 function 迭代列表並獲取每個列表的 URL。

async function scrapeListingUrl(listingURL) {
  try {
    const page = await browser.newPage();
    await page.goto(listingURL, { waitUntil: "networkidle2" });
    // await page.waitForNavigation({ waitUntil: "networkidle2" }); // Wait until page is finished loading before navigating
    console.log("Finished loading page.");

    const html = await page.evaluate(() => document.body.innerHTML);
    fs.writeFileSync("./listing.html", html);

    const $ = await cheerio.load(html); // Inject jQuery to easily get content of site more easily compared to using raw js

    // Iterate through flight listings
    // Note: Using regex to match class containing "FlightsResults_dayViewItems" to get listing since actual class name contains nonsense string appended to end.
    const bookingURLs = $('a[class*="FlightsTicket_link"]')
      .map((i, elem) => console.log(elem.href))
      .get();

    console.log(bookingURLs);
    return bookingURLs;
  } catch (error) {
    console.log("Scrape flight url failed.");
    console.log(error);
  }
}

Answer 1

使用地圖（）

const hrefs = $(selector).map((i, elem) => elem.href).get()

查看您未使用 jQuery 的代碼，因此上述代碼不起作用。 因此，您只需使用一個基本選擇器，該選擇器將 class 的一部分與 querySelectorAll 匹配。 map 用於抓取href。

const links = [...document.querySelectorAll('a[class*="FlightsTicket_link"]')]
    .map(l=>l.href)