javascript - 如何将一个 td 引用到同一 tr 中具有相似类的另一个 td？

Question

const orgDates = $('.classdate');
orgDates.each((i, elem) => {
  let parts = $(elem).text().split('/');
  let dt = new Date(parts[2], parts[0] - 1, parts[1]).getTime();
  let diffdate = Math.floor((dt - new Date().getTime()) / (86400 *
    1000));
  if (isNaN(diffdate) || dt > new Date().getTime()) {
    return 0;
  }
  if ((diffdate + 2) < 1) {
    if ((diffdate + 2) == 0) {
      diffdate = (diffdate + 1) + ' day ago';
    } else {
      diffdate = (diffdate + 1) + ' days ago';
    }
  }
  diffdate = diffdate.toString().slice(1);
  alert('date:' + $(elem).text() + ' ' + diffdate);
});

* {
  border: 1px solid red;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js"></script>
<script>
  moment().format();
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.slim.min.js" integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<table>
  <tr>
    <th>colors</th>
    <th>animals</th>
    <th>genres</th>
    <th>dates</th>
  </tr>
  <tr class="row1">
    <td>red</td>
    <td class="animal">cat</td>
    <td>horror</td>
    <td class="classdate">11/12/2017</td>
  </tr>
  <tr class="row2">
    <td>orange</td>
    <td class="animal">dog</td>
    <td>comedy</td>
    <td class="classdate">10/7/2018</td>
  </tr>
  <tr class="row3">
    <td>yellow</td>
    <td class="animal">goat</td>
    <td class="first">drama</td>
    <td class="classdate">1/3/2019</td>
  </tr>
  <tr class="row4">
    <td>green</td>
    <td class="animal">otter</td>
    <td>action</td>
    <td class="classdate"></td>
  </tr>
</table>

我试图循环遍历日期列中的每个 td，但仅使用过去的日期。因此 future 的日期或空白将被忽略。然后根据我需要的日期，我想发出一个警报，其中的日期和动物来自同一行。例如“日期:”+“classdate2”+“animal2”+“更多文本”。因为 classdate3 是 future 的，所以我想跳过它，它与animal3相关。我需要的行和两个 td 都以相同的数字结尾。到目前为止，我可以循环遍历日期并检查它与现在之间的差异，忽略 future 日期和空白，并提醒日期和今天过去了多少天。有没有办法做到这一点或者我应该尝试其他选择？

Answer 1

您可以使用类似 .closest() 的函数和.siblings()查找相关元素。

$(elem).closest("tr")

将返回包含循环中当前元素的行，并且

$(elem).siblings(".animal")

将返回<td class="animal">在同一行。

执行此操作时，您应该从类中删除所有数字，类的要点是将相同的类分配给应该进行类似处理的元素。