遍历特定 class 的每个 child div (cheerio)

Question

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

我们从parent花名册roster-palm1/1开始非常重要，因为[=30=还有很多其他地方] 具有 child 名称的响应（我还没有添加）。

  $('.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>

Answer 1

使用Element.classList to get the classes on each child element. Then use the DOMTokenList.contains方法根据类过滤子元素。

Answer 2

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

$('.roster.roster-palm 1\/1') 所以 jquery 正在尝试寻找元素 1/1 但是没有这样的元素，所以使用 $('.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>

Answer 3

您可以在单个选择器中找到 1\/1 个项目的 4/12 个子项。为确保您只获得直系子代，请使用 > 而不是

$('.roster.roster-palm.1\/1>.4\/12')

然后遍历这些。

或者，.roster 的索引很重要（如注释中所示），那么您可以使用 .find，在 .find 选择器中使用 > 将确保仅选择 direct-children。

$('.roster.roster-palm.1\/1").each((i,e) => {
    // for info: var roster = e;
    $(e).find(">.4\/12").each((ii,ee) => {
        tracking.tracking_update.checkpoints[i].city = $(e).text();
    }
});

var data=[];
$('.roster.roster-palm.1\/1>.4\/12').each((i, el) => {
    data[i] = $(el).text();
})
console.log(data);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class='4/12'>not included</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 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>

遍历特定 class 的每个 child div (cheerio)

Iterate through each child div of a specific class (cheerio)

javascript

jquery

cheerio