找到具有特定文本的td,然后在那个之后的td上运行？

Question

我对jQuery选择器不太熟悉,所以想要一些帮助.

我有这样一张桌子:

<table class="test">
  <tr>
    <td>Section Heading 1</td><td>Section Text 1</td>
  </tr>
  <tr>
    <td>Section Heading 2</td><td>Section Text 2</td>
  </tr>
  <tr>
    <td>Section Heading 3</td><td>Section Text 3</td>
  </tr>
  <tr>
    <td>Section Heading 4</td><td>Section Text 4</td>
  </tr>
  <tr>
    <td>Section Heading 5</td><td>Section Text 5</td>
  </tr>
</table>

我需要做的是找到td包含特定文本,并td对其右侧的文本进行操作.

例如,假设我想找到td包含文本Section Heading 4,并将包含在td右边的文本与文本连接起来hello,这样Section Text 4就变成了Section Text 4 hello..

哪个jQuery选择器可用于此目的？

Answer 1

我的初步答案错过了关于更新文本的观点,以下是包含以下内容的示例:

$(".test td:contains(Heading 1)")
    .next().text(function(){
        return $(this).text() + " Hello"
    });

我不相信你可以使用append方法,因为我认为它只能添加html标签.

Answer 2

首先,您要使用:contains:

jQuery( "td:contains(text)" );

然后,您可以使用.next和.append:

jQuery( "td:contains(text)" ).next().append("Hello");

这是一个用于演示用法的工作片段:

jQuery(function($) {
  $("td:contains(Text to Find)").next().append(" Hello");
});

table {
  border-collapse: collapse;
}

td {
  border: 1px solid #ccc;
  padding: 2px 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>Some Text</td>
      <td>More Text</td>
      <td>YMT</td>
    </tr>
    <tr>
      <td>Text to Find</td>
      <td>Modify:</td>
      <td>Do nothing here</td>
    </tr>
  </tbody>
</table>