jQuery/Cheerio: How to recursively get certain elements by name/tag?

I’m trying to make a bot that scrapes links from a website. I am running in to some weird error that I cannot figure out. My guess is that the second if statement is failing to check and also my unfamiliarity with jQuery is not helping.

Error:

element.each is not a function

const $ = load(html);
const html = $("#id");

const temp = [];

function recursive(element) {
  if (element.name === "a") {
    temp.push(element);
  }
  
  if (!element || element.children().length > 0 === false) {
    return "DID NOT FIND IT OR NO CHILDREN FOUND";
  }

  return element.each((_, item) => recursive(item));
}

recursive(html);
return temp;

Answer

I’ve tried to create simple snippet demonstrating what you seem to accomplished with JQuery.

Firstly, your check if for the Tag of an element doesn’t seemed to be working properly. I had to use the .prop('tagName') to get the Tag of the element. And it gets returned in all capital letters.

Your second IF-Statement should work fine, but the .each() Method didnt work as expected. You want to iterate through all children and start the recursive function. And the way you provided the child element didnt end up working. The .each() Method want a callback function which provides two parameters as you have uses correctly. but the Item is a normal HTML Node and you had to select it with the JQuery Constant $ like $(item). This gives you the desired JQuery Element you can work with.

const html = $("#test");

const temp = [];

function recursive(element) {
  if (element.prop("tagName") === "A") {
    temp.push(element);
  }
  if (!element || element.children().length > 0 === false) {
    return "DID NOT FIND IT OR NO CHILDREN FOUND";
  }

  return element.children().each((i, item) => recursive($(item)));
}

recursive(html);
console.log(temp)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="test">
  <div class="headings">
    <h1>Heading</h1>
    <a href="./main.html">Main Page</a>
  </div>
  <div class="test-cls">
    <button>Hello</button>
    <a href="./test.html">Test Page</a>
  </div>
</div>