Select 一个节点及其基于其 class 的子节点，并将其变成一个对象

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" class 作为一个对象并将名称为 "col-item-shopdetail" 的所有 class 存储到一个数组中以供访问。

因此，如果可能的话，它将像 array.item-inverserate 或通过像

这样的 cheerio 选择器来访问

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

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

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

Answer 1

换句话说，您想要一个表示具有 class .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，我们可以简单地在浏览器中测试片段 ...

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>

Select 一个节点及其基于其 class 的子节点，并将其变成一个对象

Select a node with its children based on its class, and turn it into an object

html

node.js

cheerio