jquery - 使用 jQuery 修改表行

Question

我有一个小表，我想用一些 jQuery 对其进行修改。我无法更改静态 HTML 上的类，因此这一切都需要通过 jQuery 来完成。我想看看 class=x 的 td 是否显示“48 小时保留”，然后其中且仅在该 tr 中 class=y 的 td 更改为“不可用”。我不知道如何排除不同 tr 中的内容。

<table>
  <tr>
    <td class="x">48 Hour Hold</td>
    <td class="y">Available</td>
  </tr>
  <tr>
    <td class="x">Reference Desk</td>
    <td class="y">Available</td>
  </tr>
</table>

$(document).ready(function(){
  if($(".x:contains(48 Hour Hold)")){
    $(".y:contains(Available)").text('Unavailable');
  };
})

结果最终应如下所示:

<table>
  <tr>
    <td class="x">48 Hour Hold</td>
    <td class="y">Unavailable</td>
  </tr>
  <tr>
    <td class="x">Reference Desk</td>
    <td class="y">Available</td>
  </tr>
</table>

Answer 1

您不需要 if条件下，您只需选择所有 .x包含给定字符串的元素然后修改 text() next('.y')的元素，像这样:

$('.x:contains("48 Hour Hold")').next('.y').text('Unavailable');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td class="x">48 Hour Hold</td>
    <td class="y">Available</td>
  </tr>
  <tr>
    <td class="x">Reference Desk</td>
    <td class="y">Available</td>
  </tr>
  <tr>
    <td class="x">48 Hour Hold</td>
    <td class="y">Available</td>
  </tr>
</table>