cheerio / jquery selectors: how to get a list of elements in nested div's?

Question

I need to parse some markup similar to this one, from an html page:

<div id="list">

  <div class="item-level-a">
    <div class="item-level-b">
      <a href="http://www.example.com/1"></a>
    </div>
  </div>

  <div class="item-level-a">
    <div class="item-level-b">
      <a href="http://www.example.com/2"></a>
    </div>
  </div>

  <div class="item-level-a">
    <div class="item-level-b">
      <a href="http://www.example.com/3"></a>
    </div>
  </div>

</div>

I did try with this code:

$list = [];
$('div[id="list"]').each(function() {
  var href = $(this).find('div > div > a').attribs('href');
  list.push(href);
});

without success: error was:

TypeError: Object <a href="http://www.example.com/1"></a>
                  <a href="http://www.example.com/2"></a>
                  <a href="http://www.example.com/3"></a>
has no method 'attribs'

:-(.

Any clue?

Answer 1

In cheerio and jquery, you get attributes with attr(), not attrib().

There are a few other problems with your code. Here is a working version using cheerio. It probably works in jquery this way as well.:

var list = [];
$('div[id="list"]').find('div > div > a').each(function (index, element) {
  list.push($(element).attr('href'));
});
console.dir(list);

Answer 2

For those who prefer a functional style:

const list = $('div[id="list"]')
  .find('div > div > a')
  .toArray()
  .map(element => $(element).attr('href')));

Answer 3

Spread syntax also works for getting out of jQuery-style iteration functions:

const hrefs = [...$("div#list div > div > a")].map(e => $(e).attr("href"));

There's no need for the extra .find() call since querying ancestors deeply is supported in a single CSS selector.