获取每个 <h4> 的 .class 的数量

Question

我有以下 HTML:

<div class="ratings">
    <h4>
        <a href="https://www.horoscope.com/star-ratings/today/aquarius">
Sex 
            <i class="icon-star-filled highlight"></i>
            <i class="icon-star-filled highlight"></i>
            <i class="icon-star-filled highlight"></i>
            <i class="icon-star-filled"></i>
            <i class="icon-star-filled"></i>
        </a>
    </h4>
    <h4>
        <a href="https://www.horoscope.com/star-ratings/today/aquarius">
Hustle 
            <i class="icon-star-filled highlight"></i>
            <i class="icon-star-filled highlight"></i>
            <i class="icon-star-filled highlight"></i>
            <i class="icon-star-filled"></i>
            <i class="icon-star-filled"></i>
        </a>
    </h4>
    <h4>
        <a href="https://www.horoscope.com/star-ratings/today/aquarius">
Vibe 
            <i class="icon-star-filled highlight"></i>
            <i class="icon-star-filled highlight"></i>
            <i class="icon-star-filled highlight"></i>
            <i class="icon-star-filled"></i>
            <i class="icon-star-filled"></i>
        </a>
    </h4>
    <h4>
        <a href="https://www.horoscope.com/star-ratings/today/aquarius">
Success 
            <i class="icon-star-filled highlight"></i>
            <i class="icon-star-filled highlight"></i>
            <i class="icon-star-filled"></i>
            <i class="icon-star-filled"></i>
            <i class="icon-star-filled"></i>
        </a>
    </h4>
</div>

我想通过 cheerio per h4 获得 class .highlight.

的元素数量

为此我做了以下工作：

let $ = cheerio.load(response.data);
let zodiacRatings = $('.ratings>h4');

let ratings = [];

rawZodiacRatings.map((key, val) => {
    let $ = cheerio.load(val);
    ratings.push($('.highlight').length);
});

console.log(ratings);

这个returns：

[ 3, 3, 3, 2 ]这就是我想要的。

但我认为有更好的方法来获取每个 <h4> 的 .highlight 的数量。我知道我可以在 map() 中使用 return $('.highlight').length，但这确实给我返回了更多信息，而不仅仅是：[ 3, 3, 3, 2 ].

Answer 1

这个呢？在某些时候，您需要将其从 jQuery 选择器数组切换到数组。

//switch it from jquery selectors to an actual array
let zodiacRatings = $('.ratings>h4').toArray();
//return a new array with the number lengths selected.
let ratings = zodiacRatings.map(x=>{
     return $(x).find('.highlight').length
 })  

console.log(ratings)

Answer 2

更简洁的是：

$('h4').map((i, el) => $(el).find('.highlight').length).get()

或

$('h4').get().map((el) => $(el).find('.highlight').length)

请注意 cheerio 地图（第一个）有一个额外的 i 参数，这很烦人，但这样做通常很有用。

获取每个 <h4> 的 .class 的数量

Get the number of a .class for each <h4>

jquery

cheerio