时间戳

首页 > 解决方案 > 遍历特定类的每个子 div (cheerio)

javascript - 遍历特定类的每个子 div (cheerio)

问题描述

我想获取每个子 div 'roster__item roster__item--flex 4/12 palm-1/1'的文本。我不知道为什么我的代码不起作用，我希望得到一些帮助。我想遍历每个子 div（使用上面提供的名称）并将此文本（无论是否存在）添加到对象中。

我们从父roster roster-palm 1/1开始非常重要，因为 HTML 响应（我没有添加）中还有很多其他地方都有子名称。

  $('.roster.roster-palm.1\\/1').each((i, el) => {
    el.children.forEach((item) => {
      // find that div here. How do I do it?
      tracking.tracking_update.checkpoints[i].city = item.data.trim()
    })
  })

<div class="roster roster-palm 1/1 tnt-even" style="padding-top: 11px; padding-bottom: 11px; padding-left: 28px;">
    <div class="roster__item roster__item--flex 5/12 palm-1/1" style="white-space: normal">Colis livr&#233;</div>
    <div class="roster__item roster__item--flex 3/12 palm-1/1">02/09/2020 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 12:08</div>
    <div class="roster__item roster__item--flex 4/12  palm-1/1"></div>
</div>
<div class="roster roster-palm 1/1 tnt-odd" style="padding-top: 11px; padding-bottom: 11px; padding-left: 28px;">
    <div class="roster__item roster__item--flex 5/12 palm-1/1" style="white-space: normal">D&#233;part en livraison</div>
    <div class="roster__item roster__item--flex 3/12 palm-1/1">02/09/2020 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 08:06</div>
    <div class="roster__item roster__item--flex 4/12  palm-1/1">TREMBLAY</div>
</div>
<div class="roster roster-palm 1/1 tnt-even" style="padding-top: 11px; padding-bottom: 11px; padding-left: 28px;">
    <div class="roster__item roster__item--flex 5/12 palm-1/1" style="white-space: normal">Arriv&#233;e &#224; l&#39;agence de destination</div>
    <div class="roster__item roster__item--flex 3/12 palm-1/1">02/09/2020 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 06:09</div>
    <div class="roster__item roster__item--flex 4/12  palm-1/1">TREMBLAY</div>
</div>
<div class="roster roster-palm 1/1 tnt-odd" style="padding-top: 11px; padding-bottom: 11px; padding-left: 28px;">
    <div class="roster__item roster__item--flex 5/12 palm-1/1" style="white-space: normal">Colis pris en compte par l'agence TNT</div>
    <div class="roster__item roster__item--flex 3/12 palm-1/1">01/09/2020 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 21:08</div>
    <div class="roster__item roster__item--flex 4/12  palm-1/1">CAEN</div>
</div>
<div class="roster roster-palm 1/1 tnt-even" style="padding-top: 11px; padding-bottom: 11px; padding-left: 28px;">
    <div class="roster__item roster__item--flex 5/12 palm-1/1" style="white-space: normal">Colis en cours d&#39;acheminement</div>
    <div class="roster__item roster__item--flex 3/12 palm-1/1">01/09/2020 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 20:00</div>
    <div class="roster__item roster__item--flex 4/12  palm-1/1"></div>
</div>
<div class="roster roster-palm 1/1 tnt-odd" style="padding-top: 11px; padding-bottom: 11px; padding-left: 28px;">
    <div class="roster__item roster__item--flex 5/12 palm-1/1" style="white-space: normal">Colis chez l'exp&#233;diteur</div>
    <div class="roster__item roster__item--flex 3/12 palm-1/1">01/09/2020 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 00:00</div>
    <div class="roster__item roster__item--flex 4/12  palm-1/1"></div>
</div>

标签： javascriptjquerycheerio

解决方案

问题是您的选择器中有一个空格。

$('.roster.roster-palm 1\\/1')所以jquery正在尝试寻找元素1/1但是ofc没有这样的元素，所以使用$('.roster.roster-palm.1\\/1');

演示

console.log("Elements found with .roster.roster-palm 1\\/1 .4\\/12 is: "+$('.roster.roster-palm 1\\/1 .4\\/12').length)

console.log("Elements found with .roster.roster-palm.1\\/1 .4\\/12 is: "+$('.roster.roster-palm.1\\/1 .4\\/12').length)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="roster roster-palm 1/1 tnt-even" style="padding-top: 11px; padding-bottom: 11px; padding-left: 28px;">
  <div class="roster__item roster__item--flex 5/12 palm-1/1" style="white-space: normal">Colis livr&#233;</div>
  <div class="roster__item roster__item--flex 3/12 palm-1/1">02/09/2020 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 12:08</div>
  <div class="roster__item roster__item--flex 4/12  palm-1/1"></div>
</div>
<div class="roster roster-palm 1/1 tnt-odd" style="padding-top: 11px; padding-bottom: 11px; padding-left: 28px;">
  <div class="roster__item roster__item--flex 5/12 palm-1/1" style="white-space: normal">D&#233;part en livraison</div>
  <div class="roster__item roster__item--flex 3/12 palm-1/1">02/09/2020 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 08:06</div>
  <div class="roster__item roster__item--flex 4/12  palm-1/1">TREMBLAY</div>
</div>
<div class="roster roster-palm 1/1 tnt-even" style="padding-top: 11px; padding-bottom: 11px; padding-left: 28px;">
  <div class="roster__item roster__item--flex 5/12 palm-1/1" style="white-space: normal">Arriv&#233;e &#224; l&#39;agence de destination</div>
  <div class="roster__item roster__item--flex 3/12 palm-1/1">02/09/2020 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 06:09</div>
  <div class="roster__item roster__item--flex 4/12  palm-1/1">TREMBLAY</div>
</div>
<div class="roster roster-palm 1/1 tnt-odd" style="padding-top: 11px; padding-bottom: 11px; padding-left: 28px;">
  <div class="roster__item roster__item--flex 5/12 palm-1/1" style="white-space: normal">Colis pris en compte par l'agence TNT</div>
  <div class="roster__item roster__item--flex 3/12 palm-1/1">01/09/2020 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 21:08</div>
  <div class="roster__item roster__item--flex 4/12  palm-1/1">CAEN</div>
</div>
<div class="roster roster-palm 1/1 tnt-even" style="padding-top: 11px; padding-bottom: 11px; padding-left: 28px;">
  <div class="roster__item roster__item--flex 5/12 palm-1/1" style="white-space: normal">Colis en cours d&#39;acheminement</div>
  <div class="roster__item roster__item--flex 3/12 palm-1/1">01/09/2020 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 20:00</div>
  <div class="roster__item roster__item--flex 4/12  palm-1/1"></div>
</div>
<div class="roster roster-palm 1/1 tnt-odd" style="padding-top: 11px; padding-bottom: 11px; padding-left: 28px;">
  <div class="roster__item roster__item--flex 5/12 palm-1/1" style="white-space: normal">Colis chez l'exp&#233;diteur</div>
  <div class="roster__item roster__item--flex 3/12 palm-1/1">01/09/2020 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 00:00</div>
  <div class="roster__item roster__item--flex 4/12  palm-1/1"></div>
</div>

推荐阅读