CheerioJS，使用相同的类名循环 <ul>

Question

我试图循环遍历每个

<ul>

并获取每个

<li>

的值。问题是，它只需要第一个

<ul>

并跳过其余的。

HTML

<div id="browse-results">
    <ul class="tips cf">
        <li>tip11</li>
        <li>tip12</li>
        <li>tip13</li>
    </ul>
    <ul class="tips cf">
        <li>tip21</li>        
        <li>tip22</li>        
        <li>tip23</li>        
    </ul>
    <ul class="tips cf">
        <li>tip31</li>        
        <li>tip32</li>        
        <li>tip33</li>        
    </ul>
    <ul class="tips cf">
        <li>tip41</li>        
        <li>tip42</li>        
        <li>tip43</li>        
    </ul>
</div>

Cheerio 解析

$('#browse-results').find('.tips.cf').each(function(i, elm) {
    console.log($(this).text()) // for testing do text() 
});

$('#browse-results').children().find('.tips').each(function(i, elm) {
    console.log($(this).text())
});
I've tried many more

输出只是第一个

<ul>

的值。

tip11
tip12
tip13

请注意，这只是一个片段示例，其结构与我要解析的内容相同。

我花了近2个小时在这上面，我找不到办法。

Answer 1

试试这个：

var html = '<div id="browse-results"> \
    <ul class="tips cf"> \
        <li>tip11</li> \
        <li>tip12</li> \
        <li>tip13</li> \
    </ul> \
    <ul class="tips cf"> \
        <li>tip21</li> \
        <li>tip22</li> \
        <li>tip23</li> \
    </ul> \
    <ul class="tips cf"> \
        <li>tip31</li> \
        <li>tip32</li> \
        <li>tip33</li> \
    </ul> \
    <ul class="tips cf"> \
        <li>tip41</li> \
        <li>tip42</li> \
        <li>tip43</li> \
    </ul> \
</div>';

var $ = cheerio.load(html);

$('#browse-results li').each(function(i, elm) {
    console.log($(this).text()) // for testing do text() 
});

这将选择作为

li

后代的所有

#browse-results

元素。

Answer 2

使用正确的选择器并迭代它们。

for(const $element of $("ul.tips.cf li")) {
    console.log($element.text());
}