cheerio 在 div 中访问 class

Question

好的，我正在尝试从 https://www.jamesqquick.com/blog 抓取信息。这是我的功能代码。

这里一切正常。

const axios = require('axios');
const cheerio = require('cheerio');

axios.get('https://www.jamesqquick.com/blog').then( res => {
        const talks = [];
        const $ = cheerio.load(res.data);

        $('li.card').each( (index, element) => {
        const title = 
            $(element)
            .children()
            .first()
            .text();

        const sildesLink = $(element)
            .children('a')
            .last()
            .attr('href');

        const date = $(element)
            .children('small')
            .last()
            .text();
        talks[index] = {title, sildesLink, date}
        })

        console.log(talks);
    })

我正在尝试从 card--description 和 post-- 中抓取每个博客 post 的描述标签。这是我正在访问的卡的 HTML。

<li class="card">
<a href="/blog/react-router-in-five-minutes">
<h3 class="card--title">React Router in 5 Minutes</h3>
</a>
<small class="card--date">04/06/2020</small>
<div>
<p class="card--description">I use React all of the time and always have to look up how to setup React Router. In this post, I'll show you how to setup React Router in…</p>
<small>Tags:<!-- --> 
<small class="post--tag">web-development</small>
<small class="post--tag">javascript</small>
<small class="post--tag"> react</small>
</small>
</div>
</li>

如何访问卡片--描述和post--标签。这是我如何做的当前代码。

        $('.card--description').each( (index, element) => {
            const desc = $(element)
            .children()
            .first()
            .text();
            test[index] = {desc}
            })

由此得出的结果是。

[
  { desc: '' }, { desc: '' },
  { desc: '' }, { desc: '' },
  { desc: '' }, { desc: '' },
  { desc: '' }, { desc: '' },
  { desc: '' }, { desc: '' },
  { desc: '' }, { desc: '' },
  { desc: '' }, { desc: '' },
  { desc: '' }
]

所以它正在捡东西。任何帮助，将不胜感激。此代码的预期结果将能够显示所有描述。

Answer 1

您可以简单地使用类名和标签名作为目标

$('li p.card--description').each((index, element) => {
    const desc = $(element).text();
    test[index] = { desc }
})
$('li small.post--tag').each((index, element) => {
    const desc = $(element).text();
    test2[index] = { desc }
})

Answer 2

我会做类似的事情：

$('li.card').get().map(li => {
  return {
    cardDescription: $(li).find('.card--description').text(),
    postTags: $(li).find('.post--tag').get().map(small => $(small).text())
  }
})

cheerio 在 div 中访问 class

cheerio accessing a class within a div

html

javascript

cheerio

axios