вытащить несколько значений из одного и того же TR с Cheerio?

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-blockMT-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 правильно извлекает данные с веб-сайта, однакокогда второй запускается и пытается захватить другой <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);
});