根据其类选择一个节点及其子节点，并将其转换为对象

Question

我想了解如何抓取网站数据。这是我感兴趣的 html 的一部分。我使用cheerio 来查找我需要的数据。

<td class="col-item-shopdetail">
    <div class="shoprate2 text-right hidden-xs">
        <div class="currbox-amount">
            <span class="item-searchvalue-curr">SGD</span>
            <span class="item-searchvalue-rate text-black">42.0000</span>
        </div>
        <div class="item-inverserate">TWD 100 = SGD 4.2</div>
        <div class="rateinfo">
            <span class="item-timeframe">12 hours ago</span>
        </div>
    </div>
    <div class="shopdetail text-left">
        <div class="item-shop">Al-Aman Exchange</div>
        <div class="item-shoplocation">
            <span class="item-location1"><span class="icon icon-location3"></span>Bedok</span>
            <span class="item-location2"><span class="icon iconfa-train"></span>Bedok                            </span>
        </div>
    </div>
</td>

我希望将“col-item-shopdetail”类作为一个对象，并将名称为“col-item-shopdetail”的所有类存储到一个数组中以供访问。

因此，如果可能的话，它将像 array.item-inverserate 或通过 Cheerio 选择器一样访问

$('.col-item.shopdetail').children[0].children[0].children[1]

我尝试循环遍历商店的名称并存储在一个数组中，并在完成循环名称后使用另一个循环来查找费率。然后尝试通过访问数组的相同索引将费率与名称匹配。但是，由于未知原因，这不起作用，因为每次打印的速率具有不同的值，并且每次尝试的同名索引都不同。

这与我想要的很接近，但它不起作用：

how to filter cheerio objects in `each` with selector?

Answer 1

换句话说，您想要一个对象数组来表示具有类 .col-item-shopdetail 的元素，并且每个对象都应该具有对应于它们包含的 .item-inverserate 元素的属性？

你需要map method

my_array = $('.col-item-shopdetail').map(function(i, el) {
    // Build an object having only one property being the .item-inverserate text content
    return {
       itemInverserate: $(el).find('.item-inverserate').text()
    }; 
}).get();

// You can also directly target inverserate nodes 
// which will exclude empty entries ('shopdetail' that have no 'inverserate')
// Loop over .item-inverserate elements found
// somewhere in a .col-item-shopdetail
// (beware, space matters)
my_array = $('.col-item-shopdetail .item-inverserate').map(function(i, el) {
    // Build an object having only one property being the .item-inverserate text content
    return {itemInverserate: $(el).text()};

    // Note: If all you need is the inverserate value,
    // Why not avoiding an intermediate full object?
    // return $(el).text()
}).get();

由于 Cheerio 的开发者已经基于 jQuery 构建了他们的 API 并使用了大部分核心方法，我们可以在浏览器中简单地测试 sn-ps ...

my_array = $('.col-item-shopdetail').map(function(i, el) {
    return {
       itemInverserate: $(el).find('.item-inverserate').text()
    }; 
}).get();

console.log(my_array[0].itemInverserate)

my_array_2 = $('.col-item-shopdetail .item-inverserate').map(function(i, el) {
    // Build an object having only one property being the .item-inverserate text content
    return {itemInverserate: $(el).text()};
}).get();

console.log(my_array_2[0].itemInverserate)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table><tr><td class="col-item-shopdetail">
    <div class="shoprate2 text-right hidden-xs">
        <div class="currbox-amount">
            <span class="item-searchvalue-curr">SGD</span>
            <span class="item-searchvalue-rate text-black">42.0000</span>
        </div>
        <div class="item-inverserate">TWD 100 = SGD 4.2</div>
        <div class="rateinfo">
            <span class="item-timeframe">12 hours ago</span>
        </div>
    </div>
    <div class="shopdetail text-left">
        <div class="item-shop">Al-Aman Exchange</div>
        <div class="item-shoplocation">
            <span class="item-location1"><span class="icon icon-location3"></span>Bedok</span>
            <span class="item-location2"><span class="icon iconfa-train"></span>Bedok                            </span>
        </div>
    </div>
</td></tr>
</table>