javascript - 使用 cheerio 从同一个 tr 中提取多个值？

Question

我正在构建一个 webscape 工具来帮助收集我正在构建的迷你体育奇数数据库的数据。我需要的数据位于 https://www.actionnetwork.com/mlb/live-odds .数据本身位于“投注”部分。下面是我正在迭代并尝试从中提取所需数据的那个页面的 HTML 示例。

HTML

<tbody>
 <tr>
  <td class="p-0"></td>
  <td class="text-right" style="height:104px"><span class="d-block highlight-green">-130<span class="fz-1 fz-md-2"></span></span><span class="d-block mt-1 highlight-green">9.5<span class="fz-1 fz-md-2"></span></span></td>
  <td class="text-right" style="height:104px"><span class="d-block highlight-green">-108<span class="fz-1 fz-md-2"></span></span><span class="d-block mt-1 highlight-green">9<span class="fz-1 fz-md-2"></span></span></td>
  <td class="text-right border-top-1 border-left-0 border-right-0 border-bottom-0" style="height:104px">
     <div class="text-center">
        <a class="" href="/subscribe">
           <svg viewBox="0 0 24 24" width="25" height="25" xmlns="https://www.w3.org/2000/svg" class="" style="stroke:#57A773;stroke-width:2;fill:#FFF">
              <path d="M12,17A2,2 0 0,0 14,15C14,13.89 13.1,13 12,13A2,2 0 0,0 10,15A2,2 0 0,0 12,17M18,8A2,2 0 0,1 20,10V20A2,2 0 0,1 18,22H6A2,2 0 0,1 4,20V10C4,8.89 4.9,8 6,8H7V6A5,5 0 0,1 12,1A5,5 0 0,1 17,6V8H18M12,3A3,3 0 0,0 9,6V8H15V6A3,3 0 0,0 12,3Z"></path>
           </svg>
        </a>
     </div>
  </td>
  <td class="text-right border-left" style="height:104px"><span class="d-block ">51%</span><span class="d-block mt-1 ">49%</span></td>
  <td class="text-right border-right" style="height:104px">
     <a class="" href="/subscribe">
        <svg viewBox="0 0 24 24" width="30" height="30" xmlns="https://www.w3.org/2000/svg" class="" style="stroke:#57A773;stroke-width:2;fill:#FFF">
           <path d="M12,17A2,2 0 0,0 14,15C14,13.89 13.1,13 12,13A2,2 0 0,0 10,15A2,2 0 0,0 12,17M18,8A2,2 0 0,1 20,10V20A2,2 0 0,1 18,22H6A2,2 0 0,1 4,20V10C4,8.89 4.9,8 6,8H7V6A5,5 0 0,1 12,1A5,5 0 0,1 17,6V8H18M12,3A3,3 0 0,0 9,6V8H15V6A3,3 0 0,0 12,3Z"></path>
        </svg>
     </a>
  </td>
  <td class="text-right" style="height:104px"><span class="d-block ">49%</span><span class="d-block mt-1 ">51%</span></td>
  <td class="text-right border-right" style="height:104px">
     <a class="" href="/subscribe">
        <svg viewBox="0 0 24 24" width="30" height="30" xmlns="https://www.w3.org/2000/svg" class="" style="stroke:#57A773;stroke-width:2;fill:#FFF">
           <path d="M12,17A2,2 0 0,0 14,15C14,13.89 13.1,13 12,13A2,2 0 0,0 10,15A2,2 0 0,0 12,17M18,8A2,2 0 0,1 20,10V20A2,2 0 0,1 18,22H6A2,2 0 0,1 4,20V10C4,8.89 4.9,8 6,8H7V6A5,5 0 0,1 12,1A5,5 0 0,1 17,6V8H18M12,3A3,3 0 0,0 9,6V8H15V6A3,3 0 0,0 12,3Z"></path>
        </svg>
     </a>
  </td>
  <td class="text-right" style="height:104px"><span class="d-block highlight-green">-107<span class="fz-1 fz-md-2"></span></span><span class="d-block mt-1 highlight-green">9<span class="fz-1 fz-md-2"></span></span></td>
  <td class="text-right" style="height:104px"><span class="d-block highlight-green">-107<span class="fz-1 fz-md-2"></span></span><span class="d-block mt-1 highlight-green">9<span class="fz-1 fz-md-2"></span></span></td>
  <td class="text-right" style="height:104px"><span class="d-block highlight-green">-108<span class="fz-1 fz-md-2"></span></span><span class="d-block mt-1 highlight-green">9<span class="fz-1 fz-md-2"></span></span></td>
  <td class="text-right" style="height:104px"><span class="d-block highlight-green">-109<span class="fz-1 fz-md-2"></span></span><span class="d-block mt-1 highlight-green">9<span class="fz-1 fz-md-2"></span></span></td>
  <td class="text-right border-left" style="height:104px">No Picks</td>
  <td class="text-right d-flex flex-column" style="height:104px">
     <div><button type="submit" class="btn pointer font-weight-semibold btn-outline-primary m-0 fz-1 text-truncate">+</button></div>
     <div><button type="submit" class="btn pointer font-weight-semibold btn-outline-primary mt-1 fz-1 text-truncate">+</button></div>
  </td>
.............
</tr>

在实际网页中，有几个这样的表格行。从每个表行中，我试图从以下行中提取:

数据

<td class="text-right border-left" style="height:104px"><span class="d-block ">51%</span><span class="d-block mt-1 ">49%</span></td>

"d-block" 和 "d-block mt-1" 包含我需要的信息。

下面是我用来执行此操作的代码:

代码

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

request('https://www.actionnetwork.com/mlb/live-odds', function (err, res, html) 
{
if (!err && res.statusCode == 200) {
    var $ = cheerio.load(html);


    $('td.text-right.border-left span.d-block').each(function(i, element) {
        var a = $(this).prev();
        console.log(a.text())
    });

    $('td.text-right.border-left span.d-block').each(function(i, element) {
        var b = $(this).prev();
        console.log(b.text())
    }); 


}
});

首先，第一个 cheerio block 从网站正确提取数据，但是，当第二个 block 运行并试图获取另一个时 <span>它打印出第一个的结果。

我遇到的下一个问题是我似乎无法弄清楚如何记录我同时抓取的两个值。当它每行迭代时，它打印出第一个跨度的值集，然后移动到下一个并打印出该跨度的值集。理想情况下，它会在迭代时打印出每行的两个值。

Answer 1

您可以在一个循环中执行此操作，仅检索第一个 span，然后使用 .next 获取其兄弟。

$('td.text-right.border-left span:first-child').each(function(i, element) {
  const a = $(this).text(); // 51%
  const b = $(this).next().text(); // 49%
  console.log(a, b);
});