时间戳

首页 > 解决方案 > 使用 Jquery 删除不匹配的元素

jquery - 使用 Jquery 删除不匹配的元素

问题描述

我h1在每个表格上方都有一个标题，我想删除td.tablecells日期与上面直接日期不匹配的任何地方h1.heading。在第一个示例中，它将删除包含 Sat 19 Jun 的 td，因为它不匹配。

我在下面使用它，但它删除了 all td.table-cell，我需要一些额外的东西来保持 td 与匹配日期。我很挣扎，因为 H1 坐在桌子外面，我似乎可以拿到最后一场比赛。

$(".date-span").filter(function() {
  return $(this).text() !== $(".heading").text();
}).closest('.table-cell').remove();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 class="heading">Fri 18 Jun</h1>
<table>
  <tr class="tablerow">
    <td class="tablecell"><span class="date-span">Fri 18 Jun</span></td>
    <td class="tablecell"><span class="date-span">Sat 19 Jun</span></td>
  </tr>
</table>

<h1 class="heading">Fri 19 Aug</h1>
<table>
  <tr class="tablerow">
    <td class="tablecell"><span class="date-span">Fri 19 Aug</span></td>
    <td class="tablecell"><span class="date-span">Sat 20 Aug</span></td>
  </tr>
</table>

标签： jquery

解决方案

使用 DOM 关系获取.prev()兄弟，即测试条件下的父标题table

并且，使用正确的选择器 ie'.tablecell'而不是'.table-cell'

$(".date-span").filter(function() {
  return $(this).text().trim() !== $(this).closest('table').prev(".heading").text().trim();
}).closest('.tablecell').remove();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 class="heading">Fri 18 Jun</h1>
<table>
  <tr class="tablerow">
    <td class="tablecell"><span class="date-span">Fri 18 Jun</span></td>
    <td class="tablecell"><span class="date-span">Sat 19 Jun</span></td>
  </tr>
</table>

<h1 class="heading">Fri 19 Aug</h1>
<table>
  <tr class="tablerow">
    <td class="tablecell"><span class="date-span">Fri 19 Aug</span></td>
    <td class="tablecell"><span class="date-span">Sat 20 Aug</span></td>
  </tr>
</table>

根据评论更新的 HTML，您可以遍历到.closest('.timetable-outer')然后使用.prev() 

$(".date-span").filter(function() {
  return $(this).text().trim() !== $(this).closest('.timetable-outer').prev(".heading").text().trim();
}).closest('.table-times').remove();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 class="heading">Wednesday 18 July</h1>
<div class="timetable-outer">
  <div class="production">
    <div class="title">A title</div>
    <table class="timetable-inner">
      <tbody>
        <tr class="table-row">
          <td class="table-times"> <span class="date-span">Wednesday 18 July</span> </td>
          <td class="table-times"> <span class="date-span">Thursday July 19</span> </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

推荐阅读