时间戳

首页 > 解决方案 > 两个具有相同类名的表，但对类的更改仅应用于一个表

html - 两个具有相同类名的表，但对类的更改仅应用于一个表

问题描述

在我的 ascx UI 页面中有两个具有相同类名“transfer_options”的 html 动态表，要求是使用相同的类名从两个表中删除一些内容。

我试过$('.transfer_options td:last img').remove();了，但它只从第一个表中删除了 img 。

第二张桌子图像仍然存在。我怎样才能删除只有类名的两个表的最后一个 td 图像。

<table id="layout_PCDZADE_ctl00" class="transfer_options" cellspacing="0" style="border-collapse:collapse;">
  <tbody>
    <tr>
      <td>
        <a id="layout_PCDZADE_ctl00_Download" class="download_link" href="">Task_01</a>
        <img src="~/test.gif" id="ctl00_Download" alt=">" class="download_bullet">
      </td>
      <td>
        <a id="layout_PCDZDSE_ctl00_Download" class="download_link" href="">Task_02</a>
        <img src="~/test.gif" id="ctl00_Downloads" alt=">" class="download_bullet">
      </td>
    </tr>
  </tbody>
</table>

<table id="layout_PCDAGJNE_ctl00" class="transfer_options" cellspacing="0" style="border-collapse:collapse;">
  <tbody>
    <tr>
      <td>
        <a id="layout_PCDZADAQE_ctl00_Download" class="download_link" href="">Task_01.01</a>
        <img src="~/test.gif" id="ctl00_Download" alt=">" class="download">
      </td>
      <td>
        <a id="layout_PCDZDSFVE_ctl00_Download" class="download_link" href="">Task_01.02</a>
        <img src="~/test.gif" id="ctl00_Downloads" alt=">" class="download">
      </td>
    </tr>
  </tbody>
</table>

标签： htmlcss

解决方案

您需要将您的链接链接td:last到一个单独的查找中，以便它在每个表中找到最后一个 td，否则选择器只会在所有表中找到最后一个 td：

$('.transfer_options').find('td:last img').remove()
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="layout_PCDZADE_ctl00" class="transfer_options" cellspacing="0" style="border-collapse:collapse;">
  <tbody>
    <tr>
      <td>
        <a id="layout_PCDZADE_ctl00_Download" class="download_link" href="">Task_01</a>
        <img src="~/test.gif" id="ctl00_Download" alt=">" class="download_bullet">
      </td>
      <td>
        <a id="layout_PCDZDSE_ctl00_Download" class="download_link" href="">Task_02</a>
        <img src="https://www.fillmurray.com/g/200/300" id="ctl00_Downloads" alt=">" class="download_bullet">
      </td>
    </tr>
  </tbody>
</table>

<table id="layout_PCDAGJNE_ctl00" class="transfer_options" cellspacing="0" style="border-collapse:collapse;">
  <tbody>
    <tr>
      <td>
        <a id="layout_PCDZADAQE_ctl00_Download" class="download_link" href="">Task_01.01</a>
        <img src="~/test.gif" id="ctl00_Download" alt=">" class="download">
      </td>
      <td>
        <a id="layout_PCDZDSFVE_ctl00_Download" class="download_link" href="">Task_01.02</a>
        <img src="https://www.fillmurray.com/g/200/300" id="ctl00_Downloads" alt=">" class="download">
      </td>
    </tr>
  </tbody>
</table>

推荐阅读