遍历 div 以获得内部带有 href 的嵌套 div

Question

<div class="view-content">
    <div class="views-row views-row-1">   
        <div class="views-field">
            <span class="field-content">
                <a href="link1">Name for link1
                    <img src="image1">
                </a>
            </span>
        </div>
        <div class="views-field-title">
            <span class="field-content">
                <a href="link1">
                </a>
            </span>
        </div>
    </div>
    <div class="views-row views-row-2">
        <div class="views-field">
          <span class="field-content">
              <a href="link2">Name for Link2
                  <img src="image2">
              </a>
          </span>
        </div>
        <div class="views-field-title">
            <span class="field-content">
                <a href="link2">
                </a>
            </span>
      </div>
    </div>

I am using node with request, and cheerio to request the data and scrape accordingly.

I am seeking the href from link1 and link2, I got it to work for one link, but it does not scale out when I try to loop it.

  const data ={
       link:"div.views-field > span > a" 
   },
   pageData = {};
   Object.keys(data).forEach(k => {
       pageData[k] = $(data[k]).attr("href");});

     console.log(pageData);

Answer 1

Your approach with $(data[k]).attr("href");is the right idea, but there's no loop here. There should be 2 elements matching this selector but your code only grabs the first.

Changing this to a [...$(data[k])].map(e => $(e).attr("href")) lets you get href attributes from all matching elements.

I'm not crazy about pageData being global and using a forEach when a map seems more appropriate, so here's my suggestion:

const $ = cheerio.load(html);
const data = {
  link: "div.views-field > span > a",
};
const pageData = Object.fromEntries(
  Object.entries(data).map(([k, v]) =>
    [k, [...$(v)].map(e => $(e).attr("href"))]
  )
);
console.log(pageData);