时间戳

首页 > 解决方案 > 如何将 td 引用到同一 tr 中具有相似类的另一个 td？

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

问题描述

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，但只使用过去的日期。所以未来的日期或空白将被忽略。然后根据我需要的日期，我想发出一个警报，其中包含同一行的日期和动物。例如'日期：' + 'classdate2' + 'animal2' + '一些更多的文字'。所以因为 classdate3 在未来我想跳过它，它是关联的 animal3。我需要的行和两个 td 都以相同的数字结尾。到目前为止，我能够遍历日期并检查它与现在之间的差异，忽略未来的日期和空白，并提醒日期和今天过去多少天。有没有办法做到这一点，或者我应该尝试替代方案？

标签： javascriptjquery

解决方案

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

$(elem).closest("tr")

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

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

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

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

推荐阅读